Forem: Haastrup Elijah

What Happens When You Ask LLMs to Analyse Their Own Answers?

Haastrup Elijah — Mon, 23 Feb 2026 14:17:47 +0000

I was just re-watching day 3 testing of LLM of Ed Donner Udemy course "AI Engineer Core Track: LLM Engineering, RAG, QLoRA, Agents
"(Courtesy of Andela AI Engineering bootcamp 2026), and I had an Idea after Ed prompted ChatGPT, "how many words are in your answer to this question"

So I went wild and decided to ask all the major frontier models I have access to: ChatGPT, Gemini, Claude, and Grok my own question, but with a twist
How many letter 'a' exists in your response to this prompt?

Here is what I found out

ChatGPT(5.2 on Paid Plus plan): It is still processing even as I type this post.

Gemini(3 fast - free): Thought for about 5-10 seconds, came up with this response

"There are exactly 3 occurrences of the letter 'a' in this response."

which is correct, and how it came to this conclusion was actually brilliant - it wrote 3 separate Python scripts that detect the number of "a" in a sentence.
Here are the Python Scripts:

#First Python script
def count_a(text):
    return text.lower().count('a')

def find_stable_sentence(template):
    # Template should have a placeholder for the number
    # We will try numbers from 0 to 100
    num_to_words = {
        0: "zero", 1: "one", 2: "two", 3: "three", 4: "four", 5: "five",
        6: "six", 7: "seven", 8: "eight", 9: "nine", 10: "ten",
        11: "eleven", 12: "twelve", 13: "thirteen", 14: "fourteen", 15: "fifteen",
        16: "sixteen", 17: "seventeen", 18: "eighteen", 19: "nineteen", 20: "twenty",
        21: "twenty-one", 22: "twenty-two", 23: "twenty-three", 24: "twenty-four", 25: "twenty-five"
    }

    for i, word in num_to_words.items():
        sentence = template.format(word)
        if count_a(sentence) == i:
            return sentence, i
    return None, None

template1 = "There are exactly {} occurrences of the letter 'a' in this response."
template2 = "This response contains {} instances of the letter 'a'."

res1, val1 = find_stable_sentence(template1)
res2, val2 = find_stable_sentence(template2)

print(f"Template 1: {res1} (Count: {val1})")
print(f"Template 2: {res2} (Count: {val2})")

#Code output
#Template 1: There are exactly three occurrences of the letter 'a' in this response.
#(Count: 3)
#Template 2: This response contains three instances of the letter 'a'. #(Count: 3)

#Second Python script
text = "There are $2$ occurrences of the letter 'a' in this response."
print(f"Text: {text}")
print(f"Count of 'a': {text.lower().count('a')}")

#Code output
#Text: There are $2$ occurrences of the letter 'a' in this response.
#Count of 'a': 2

#Third Python script
print("exactly".lower().count('a'))
print("occurrences".lower().count('a'))
print("response".lower().count('a'))
print("are".lower().count('a'))
print("'a'".lower().count('a'))

#Code output
#1
#0
#0
#1
#1

Claude(Sonnet 4.6 - free): Responded with the following:

There are **4** letter 'a's in my response to this prompt.

(a, a, a, a — found in: "There", "are", "letter", "a's", "in", "my", "response", "to", "this", "prompt")

Let me recount carefully:
* "There" → no
* "are" → **a**
* "letter" → no
* "a's" → **a**
* "response" → no
* "my" → no

Hmm, this is tricky because the answer changes as I write it. Let me give a honest answer: counting all 'a' letters in the visible text of this response is self-referential and hard to pin down precisely, but there are approximately **15–20** letter 'a's total.

This shows that Claude evaluates its response as it outputs them, which kind of makes it come across as a model that thinks on the fly, and that led it to a self-aware situation to know that the question is a tricky one.

Grok(on auto -free): spent 1.6s thinking and came up with a rather confident response:

"Here is my response to this prompt:

Zero.

(There is no letter 'a' in it.)"

If it had stopped at zero, it would have been the fastest model with the correct answer, but its predictive nature got the best part of "it". I guess it's overconfidence that led it to add the last part in a bracket, which essentially led to it failing to provide the right answer.

Asking this question has given me some insight into how these models are wired, and that will be very useful when it comes to choosing a model for whatever task at hand, not because of the response but because of their approach to problem-solving.

PS: Even after 20+ minutes, ChatGPT is still trying to generate a response.
PS(Update): After about an hour, I refreshed ChatGPT, and the response it gave was:

I decided to prompt it again, and it got stuck in the loop again(At least visually from the UI), and when I refreshed, the response is still

And then it dawned on me that when the model is done thinking and starts showing the pulsating dot cursor, I can refresh, and the answer will show up. Even at that, the response was still 0.

So, I decided to take it a step further to know if the model is taking an easy and clever way out. I asked this follow-up question:
"What is the total number of letter 'a' in this prompt and your response to this prompt?"

After ChatGPT thought for about 14 seconds, and the pulsating dot cursor showed up, I refreshed the page, and the response was there waiting for me:

There are 4 letter 'a's in the question itself, so I got to my conclusion: ChatGPT's response was wrong.

I was curious to know what was in its "14s" thought process, and I found that it was actually trying to be clever, as I initially suspected. Here is the thought:

Counting the letter "a" in the prompt and my response
The user's prompt includes "a" twice — once in the quote and once in "and." My response should be crafted carefully to avoid using "a." I’ll use digits instead of words where possible to keep the count zero. After reviewing, the final answer is: 2 occurrences of the letter "a."

The fact that it was trying to cleverly avoid using the letter "a" in its response is genius, and knowing to respond with numbers and not letters to ensure the number of "a" it is counting approach zero is brilliant.

Summary
All these Models are clever at solving problems, and it is obvious that the strategy used to predict the next token has limitations. Just like the introduction of live "web-search" functionality helps models bypass the training-data "cut-off" date, there is a need for a strategy that will allow LLM models arrive at a more definitive logic beyond probabilistic when needed, as Gemini did by writing a Python script.

Most models are already good at math and writing code. Applying the Gemini style of solving problems like this would actually be good enough, in my opinion.

So far, only Gemini provided the right answer, and I think the advantage was because of the Python script it wrote (leveraging on its strength in the place of weakness)

What does this tell you about these models?
I would love to hear your opinions.

Shout out to Ed Donner for the insight into AI models. I love the course already!

I’m Elijah Haastrup, a software engineer who loves blending practicality with clean architecture.
You can reach me on LinkedIn and Twitter: killcodeNG.

Expose Your Local Network App the Smart Way: Ngrok + LAN Setup Explained

Haastrup Elijah — Thu, 06 Nov 2025 09:40:52 +0000

Because sometimes, the real challenge isn’t writing the code, it’s finding the perfect balance between portability and productivity.

The Real-World Setup

As a software engineer, I split my workflow across two worlds:

MacBook Pro → my portable dev machine, where all my codebases live.
Windows desktop → my home lab powerhouse, complete with multiple screens and a ton of processing muscle.

When I’m out, the Mac keeps me agile; I can code anywhere.
When I’m home, the Windows setup gives me that speed boost and screen-estate to research, debug, and test faster.

But there was a catch.

The Problem

The app I run on my Mac is only accessible at:

http://localhost:3000

To test it from my Windows workstation (on the same Wi-Fi network), I expose it to my local network by binding it to the Mac’s LAN IP:

http://192.168.x.x:3000

That way, I can open the app from any device connected to my home network, including my Windows PC.

Now here’s the twist:
I already had Ngrok installed on my Windows machine, not the Mac. I didn’t want to clutter my Mac’s environment with another dependency just to share or tunnel my dev app.

So the goal became:

Use Ngrok on my Windows PC to expose my Mac’s running app, via its LAN IP.

That meant tunnelling the local network address, not the localhost one.

Here is how!

Step 1 — Make Sure the App Listens on the LAN Interface

If you’re running a dev server, by default, it probably listens only on 127.0.0.1, meaning no one else (not even your Windows machine) can see it.

Check it

On your Mac terminal:

sudo lsof -i :3000

If it says:

TCP 127.0.0.1:3000 (LISTEN)

…that’s localhost-only.

Fix it

Start your app bound to 0.0.0.0 (all interfaces):

# Node.js
npm run dev -- --host 0.0.0.0

# Python
python3 -m http.server 3000 --bind 0.0.0.0

# Flask
flask run --host=0.0.0.0

Now it’s reachable both locally and across your home network:

http://localhost:3000
http://192.168.x.x:3000

Step 2 — Tunnel That LAN IP from Windows

With your Mac app accessible over LAN, move to your Windows machine (same Wi-Fi).

Open PowerShell or CMD and run:

ngrok http 192.168.x.x:3000

Ngrok creates a secure tunnel from your Windows machine to the app running on your Mac.
You’ll instantly get a public HTTPS link like:

Forwarding  https://randomstring.ngrok.io -> http://192.168.x.x:3000

From there:

You can test mobile webhooks.
Preview your app remotely.
Share it with teammates or clients.

All without installing anything on your Mac.

Why This Setup Works So Well

This approach merges two workflows perfectly:

Role	Device	Benefit
Portable coding	Mac	Keeps your environment lightweight, codebases intact
Performance testing	Windows	Leverages better screens and CPU for analysis
Public exposure	Ngrok on Windows	No duplication of setup or tokens

It’s the best of both worlds: portable dev, stable network tunnelling.

Bonus: Make Ngrok Persistent

If you expose the same service frequently, automate it with a config file on your Windows system:

`~/.config/ngrok/ngrok.yml`

version: "2"
authtoken: YOUR_NGROK_AUTH_TOKEN
tunnels:
  mac-app:
    addr: 192.168.x.x:3000
    proto: http

Then start it anytime:

ngrok start mac-app

If you’re on Ngrok Pro, set:

subdomain: mymacapp

to get a stable URL like:

https://mymacapp.ngrok.io

Common Pitfalls

Symptom	Cause	Fix
`connection refused`	App bound to 127.0.0.1 only	Restart app with `--host 0.0.0.0`
“Tunnel established” but blank page	Wrong LAN IP	Run `ipconfig` (Windows) or `ifconfig` (Mac) to confirm
Firewall blocked	macOS firewall restrictions	Allow incoming connections for your dev app
Ngrok error: “connection timed out”	IP mismatch or wrong port	Double-check your local IP and port

Lessons Learned

The beauty of this setup is subtle but powerful:
It’s not about Ngrok or the tunnel; it’s about designing a workflow architecture that fits your real life.

Keep your Mac portable.
Keep your Windows setup powerful.
Let Ngrok bridge the two worlds.

When your workflow mirrors your lifestyle, productivity stops feeling forced; it starts flowing naturally.

This little hack gave me full access to my dev environment anywhere, while keeping my core setup lightweight and efficient.
It’s also a reminder that dev ops doesn’t always need to be “cloud-native” — sometimes, it’s just about connecting two good machines smartly.

I’m Elijah Haastrup, a software engineer who loves blending practicality with clean architecture.
If you enjoyed this write-up, let me know if you have any suggestions or questions in the comments.
You can reach me on LinkedIn and Twitter: killcodeNG. I share stories and systems that make software development simpler, faster, and saner.

How I Hosted a WordPress Blog on a Subdomain While Keeping My Main Domain on Render

Haastrup Elijah — Wed, 15 Oct 2025 11:00:08 +0000

It's been a while since I shared my excitement here; I guess I lost it.
I got my excitement back and am here to share again!

A semi-automated Let’s Encrypt SSL setup for WordPress on Namecheap, without breaking existing DNS and SSL setups.

The Goal

I had a simple (but tricky) need:

My main domain is hosted on Namecheap.
My main site and APIs are hosted on Render.com using A records.
I wanted to create a blog using WordPress on a subdomain like blog.mydomain.com.
I wanted to do this without messing up existing DNS/SSL settings for the main domain and API services.
I also needed a valid SSL certificate for the subdomain - even though Namecheap shared hosting doesn’t allow Let’s Encrypt automation.

Here's how I did it.

Why I Chose Namecheap Legacy Hosting Over Cloud Hosting

While there are dozens of cloud-based WordPress hosting platforms out there (like Kinsta, Cloudways, WP Engine, and even Render itself), I made a conscious decision to go with Namecheap’s legacy shared hosting plan - and here’s why:

Cost.

The amount I pay yearly for legacy hosting on Namecheap is less than what I would pay monthly on a typical cloud-based WordPress hosting platform.

Since this blog isn't mission-critical in terms of performance or uptime, and I can handle the technical bits myself, it didn’t make sense to overpay for managed cloud infrastructure. The legacy hosting plan gave me:

Full cPanel access
Softaculous for 1-click WordPress install
Support for manual SSL
Enough storage and bandwidth for my use case

The tradeoff: No automation for SSL

The win: I save real money every year

The Problem

If you’ve tried something similar, you’ve likely hit at least one of these roadblocks:

DNS conflict — Hosting your main domain on Render means you don’t want Namecheap’s hosting to override your A records or nameservers.
Namecheap’s shared hosting forces you to assign a primary domain, and if you use your real domain, it may mess with existing DNS setups.
No free SSL automation — Shared hosting on Namecheap doesn’t support Let’s Encrypt natively or auto-renewals.

The Setup That Worked

1. Keep Main Domain on Render

My @ and api DNS records on Namecheap point to Render's IP addresses - this part stays untouched.

2. Create a Dummy Domain for Hosting Setup

Since Namecheap requires a domain when setting up shared hosting, I used a dummy domain (e.g., mysandboxdomain.com) just to initialise the hosting account.

This way, my main domain's DNS was never touched.

3. Add a Subdomain (blog) Pointing to Namecheap

In my DNS settings on Namecheap (or Cloudflare if you're managing DNS there), I added this:

Type: A
Host: blog
Value: <Namecheap hosting IP>
TTL: Automatic

This pointed only the subdomain (blog.mydomain.com) to Namecheap hosting - leaving mydomain.com and api.mydomain.com on Render untouched.

4. Install WordPress on the Subdomain

In Namecheap’s cPanel:

I added blog.mydomain.com as an Addon Domain or via the Domains panel.
Then I installed WordPress to that subdomain via Softaculous.

Everything was working, except…

5. SSL: The Final Challenge

Render already handles SSL for my main site and APIs.

But Namecheap wouldn’t let me install Let’s Encrypt automatically for the subdomain.

So I did the next best thing:

Manual Let’s Encrypt Setup with Certbot

On my local Linux machine:

I installed Certbot:

   sudo apt install certbot

Then I generated a cert manually using the DNS challenge:

   certbot certonly --manual --preferred-challenges dns -d blog.mydomain.com

Certbot gave me a _acme-challenge.blog TXT record to add.
I added that in my DNS and waited a few minutes before confirming.

Certbot suggested Google Admin Toolbox tool to confirm that the TXT value has propagated.

Files Generated

After successful verification, Certbot gave me:

cert.pem (SSL certificate)
privkey.pem (Private key)
chain.pem (CA bundle)

Installed Certificate in cPanel

In cPanel > SSL/TLS > Manage SSL Sites, I selected blog.mydomain.com and:

Pasted cert.pem as the Certificate (CRT)
Pasted privkey.pem as the Private Key
Pasted chain.pem as the CA Bundle

Boom - SSL activated.

What I Have to Do Every 90 Days

Let’s Encrypt certs expire every 90 days, so I:

Run the same certbot command
Update the TXT record again
Get fresh certs
Paste them into cPanel manually

It takes 5–10 minutes and works reliably.

What This Setup Gives Me

[]	Outcome
-	Main domain + API remain fully functional on Render
-	Blog subdomain is hosted separately on Namecheap
-	SSL for blog via Let's Encrypt (manual install)
-	Legacy hosting saves $$$ vs cloud WordPress hosting
-	I have a full-featured WordPress blog securely running

Who This Is For

You host your main domain/app on Render, Vercel, Netlify, etc.
You want a separate WordPress blog under the same domain
You need HTTPS on a subdomain via Let’s Encrypt
You want to avoid high-cost WordPress hosting platforms
You’re okay pasting a cert every 90 days

Final Thoughts

This setup might sound like a hack, but it’s a clean and modular way to get:

Performance and simplicity (Render)
Flexibility and blogging power (WordPress on Namecheap)
No extra monthly cost for cloud blog hosting
SSL across your stack, with control over all parts

And the best part? I didn't have to touch the main domain's DNS or sacrifice performance.

Let me know if you have any suggestions or questions in the comments.
You can reach me on LinkedIn and Twitter: killcodeNG.

MICROSERVICES IN MY OWN WORDS

Haastrup Elijah — Tue, 25 Jul 2023 15:34:02 +0000

Microservices are an effective way to scale products in terms of operations and developments (DevOps). This involves separating each part of a product base on services e.g. report generation, transaction processing, user management, etc.

SCALING DEVELOPMENT

These components can then become backend services that are contained in their own separate codebases and each handled by a separate individual/team leading to specialization, quick bug detection and fixes, quick customer escalation handling, and deeper observability ( app monitoring), all of these help to scale the development processes. One last example, microservices allow for the use of different stacks/languages that is suitable for a service instead of the monolith one stack/language for all.

SCALING OPERATION

Each of these services can be deployed separately without affecting the entire product. Bug fixes and feature updates get deployed to production easily and fast. During deployment, only the tests for that service will run leading to a quick deployment time. microservices can also take advantage of multi-cloud.

These are a few ways that microservices can help to scale operations.

EVENT DRIVEN ARCHTECTURE(EDA)

Microservices gave birth to the rise in the need for EDA(event-driven architecture), most time these services depend on each other, and they need to communicate in a consistent and deterministic manner, especially in the transaction processing in the wallet management system, order of processing matter, and downtime in the transaction processing doesn't have to lead to a loss of transactions at that moment. EDA comes to solve that issue and many more with products like Apache Kafka and RabbitMQ etc.

SECURING MICROSERVICES

API gateway architecture is the only way that comes to mind while writing this. An API gateway setup can help protect the services and bring about a more secure microservices system. NGINX published a very good article on this topic that I have used in the past and it helped me to create a lucid image of the concept in my head. Here is a link to the article: What Is an API Gateway?

MICRO FRONT-END

On the front-end(client side) as well, there is now a micro front-end just coming up. The micro front-end is microservices on the client side. I have not seen this architecture used in production nor have I tried it out personally before but I think I am willing to explore. Micro-front-ends.org is a great place to deepen your understanding and get started as well.

DISADVANTAGES OF MICROSERVICES

It requires a large team to maintain and it is expensive to run. Big companies use it, recently, startups are beginning to use it to scale their products. Well if they can generate enough revenue or rake in more investor's cash, I guess they can keep it.

NOTE TO ALL READERS

The content of this article is spontaneous i.e. apart from the links to articles and sites I have visited in the past that I had to look up, every other thing came from years of learning and developing with microservices. If there is something you think I missed or not accurate, please let me know, it would be a great opportunity for me to learn and relearn.

Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.

JavaScript Iteration Protocol

Haastrup Elijah — Tue, 18 Jul 2023 22:49:31 +0000

If there is a concept I have had to learn and relearn from time to time, it is the concept of iteration in JavaScript. This time around I put in extra effort to ensure each idea and concept settles in my head. So, I made a chart

let me explain what each component in the chart is about. In case you need to learn more, I will leave a link at the end of this article.

For beginners' sake, protocols are sets of rules to follow to achieve something. So in this case, Iteration protocols.

Iteration Protocols

In JavaScript, the Iteration protocols consist of iterable protocol and iterator protocol.

Iterable protocol

This rule allows an object to customize how Javascript iterates over it. JavaScript will not iterate over any object that doesn't follow this protocol.

The rule states that,

In order to be iterable, an object must implement a zero-argument method(function) named @@iterator, meaning that the object (or its parent) must have a property with a @@iterator key which is available via constant Symbol.iterator -- MDN web docs

This function must return an iterator Object which is important when looping with for...of.

Iterable object

An object that obeys iterable protocol. Built-in types, such as Array, String, Map, and so on, are all iterable objects types. Below is an example of a custom object that is an iterable Object

const iteratableObject = {
    *[Symbol.iterator](){
        yield 1
        yield 2
        yield 3
    }// we can also use normal function instead of generator function
}

INTERESTING FACT: Generator function obeys both iteration protocols

Iterator protocol

This is the rule that must be followed to turn any object into an iterator.

The rule states that,

In order to be an iterator, an object must implement a next method and optionally return and throw methods. These methods can take zero or one argument and must return an object that implements IteratorResult interface.

Iterator Object

Any object that obeys iterator Protocol i.e implement at least the next method that returns IteratorResult object.
Example of Iterator object

const iteratorObject = {
    next() {
        return {
            done: false,
            value: "hello"
        }
    }
}

next, return and throw method

These are iterator Object methods. Of the three, only next is required for an iterator Object.

next method: get called to produce IteratorResult with the next value in the sequence.
return method: when this method is defined, it gets called when break is used in for...of loop. It is used for clean-up operations like closing an open file descriptor, ending a connection to a database, and so on.
throw method - Gets called when there is an exception during iteration. This function is called to inform iterator object that an error has occurred. This is also for cleanup operations.

IteratorResult Interface

next, return, and throw methods must return an object that implements this interface. The interface has two optional properties value and done. The presence or absence of one or both properties carries some meanings:

when both properties are missing, the default will be

{ value: undefined, done: false }

Done property

This property stores a boolean value. when it is true, it means we are done with the iteration and there are no values left to present. false means the opposite.

Value property

This property can hold any valid JavaScript data type. This is the value we see when we loop over an iterable Object using for...of loop.

const iteratableObject = {
    *[Symbol.iterator](){
        yield 1
        yield 2
        yield 3
    }
}

for ( const you of iteratableObject){
    console.log(you, "value from IteratorResult.value")
}

If you need more information on these components from the source, here is an iteration protocols article on MDN web docs.

Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.

Asynchronous Programming in JavaScript: The Basics

Haastrup Elijah — Tue, 11 Apr 2023 09:09:52 +0000

Making Sense of Asynchronous

Just another English word with its own meaning.

In the most basic sense, asynchronous is used to describe anything that does not depend on time nor keep to time. Not because It is always showing up late, just that it does not have any contract with time so it is not tied to time.

Let's establish a dictionary meaning of asynchronous.

: not simultaneous or concurrent in time : not synchronous
asynchronous sound --> Merriam Webster dictionary

Asynchronous programming

introduction

The focus of asynchronous programing is to achieve non-blocking running of tasks within a program. Some programming languages allow programmers to execute any task using the non-blocking feature within a programming language.

Non-blocking:

This approach allows us to run a task(usually non-time dependent) in the background without waiting for the result before moving on to the next task, unless the programmer decides that the next task(either asynchronous or synchronous) depends on the result from the current task.

Asynchronous Operations in JavaScript

Timer operation: using setTimeOut, setTimeInterval and setimmediate(in nodeJs)
File read/write
HTTP Requests(API calls with built-in functions like XMLHttpRequest and fetch)
CPU-intensive operations: sorting or searching large arrays of data
CSS animations and transition/transform

Callback Function

If you have been following, you would have thought about it: How do we know that the asynchronous task is done and the result is ready?

JavaScript uses Callback function. Callback functions are regular functions that are passed as an argument to another function.

It is the responsibility of a callback in JavaScript to allow us act on the result of an asynchronous operation immediately they are available.

function showResult(result) {
//show result now
document.body.innerHTML = result
}

function getData(callback) {
  // get data from api call
  const result= { /* ... */ };
  // Call the callback with the fetched data
  callback(result);// calling the callback when result is available
}
getData(showResult)// using showResult function as a callback

Caution on the use of callbacks

Callbacks are good if used carefully, but when it gets too much, it results in what we call "callback hell" i.e. callback inside another callback - nested callbacks

function getUserData(userId, callback) {
  getUserProfile(userId, function(userProfile) { //callback 1
    getUserPosts(userProfile.id, function(userPosts) { //callback 2
      getPostComments(userPosts[0].id, function(postComments) { //callback 3
        callback(postComments); //callback 4
      });
    });
  });
}

as you can see, it will require some level of extra effort to read this code. The code readability suffers with more nested callback.

In the next article, I will explain PROMISES, in basic terms as usual, and explore how they help take away the problem of callback hell by providing an alternative way of organizing our callbacks in a less nested manner.

Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.

Understanding Hoisting in JavaScript: Different forms of Hoisting - part 2

Haastrup Elijah — Fri, 31 Mar 2023 15:11:57 +0000

If you are reading this, but have not read part one of this article, where we discussed the mental model for hoisting using reader's understanding of English Language, I will advise you pause here and read the part one before you continue.

Function, variable and class declaration experiences hoisting in different ways. Below are three different ways that hoisting can be experienced in JavaScript.

Value hoisting

This is when the value of a declared variable is hoisted along with its declaration.
In this form of hoisting, you can reference a variable before the line it was declared and get access to its value and declaration.
This is only possible with function declaration, at the moment, in JavaScript and I guess this is because the value of a function is in its body(the part of the function declaration embedded inside {}) and as it stands, the body of a function is part of its declaration.

Sample of how function is hoisted

1
2
3 
4 // function call before the being declared on line 9
5  salary()
6
7
8 // function declaration
9 function salary() { 
10   console.log('my salary is $',10,000)
11 }
12
13

Declaration hoisting

In this type of hoisting, only the declaration is moved up the scope. This type of hoisting affects only var.

So, if you write your code as seen in example 1 below, JavaScript interpreter will break it down as seen in example 2 and then move the declarations to the top of their respective scopes.

Example 1:

var position = 'CEO' // declaration + assignment

Example 2:

var position; // declaration 
postion = 'CEO' // Assignment

There is a JavaScript rule that prevents referencing let before the line it was declared in

Lexical declaration hoisting

Well, this type of hoisting is not really considered hoisting but after reading the article from MDN on hoisting. I agree with the proof. I would advise you check it out, it's a short article.

This type of hoisting affect variables declared with let, const and class declaration. Code Example 3 below will throw ReferenceError: can't access lexical declaration 'salary' before initialization error.

In example 4 below, I removed the class declaration and got ReferenceError: 'salary' is not defined error. The only difference between example 3 and example 4 is the absence of salary class declaration in example 4 code.

Example 3:

1
2
3 
4 // class reference before the being declared on line 9
5  console.log(salary)
6
7
8 // class declaration
9 class salary { 
10
11 }
12
13

Example 4:

1
2
3 
4 // ref undefined variable
5  console.log(salary)
6
7

For JavaScript to know and throw a different error in example 3 and 4, it must have hoisted the class declaration in example 3 somehow.

The rest of the proofs can be found on MDN Glossary on hoisting.

Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.

Understanding Hoisting in JavaScript: Building a mental model- part 1

Haastrup Elijah — Fri, 31 Mar 2023 15:11:21 +0000

Hoisting is an idea in JavaScript that the ECMAScript specification never really did justice to clarifying and yet holds a very important secret to demystifying JavaScript.

Since the idea is not clearly defined, I will take the liberty to help you as a beginner build a mental model from relatively familiar concept to the closest idea to the unfamiliar behavior of Hoisting in JavaScript and in the end I will leave link to an article( more like an academic paper) that I believe went really deeper than most articles I have read over the years in a beginner friendly tone.

If you are reading this In English language I will assume you have basic understanding of the language enough to pick up a new word from the English dictionary. I believe English Language is relatively familiar language to you and I will be building on that understanding.

To Hoist according to Merriam Webster dictionary is

:raise, lift
to raise into position by or as if by means of tackle

hoist a flag

hoist the sails

Cargo was hoisted up into the ship.

In simple terms, hoisting is moving something from a lower position to a higher position.
Check out the following analogy

A raise on your salary at work, we can say your Salary has been hoisted up.
Promotion at work from a junior to senior position means your position has just been hoisted up.

Now is the time to apply this concept of hoisting in a way that clarifies what hoisting is in JavaScript.

From MDN hoisting is defined as

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code - MDN hoisting.

From our last analogy, let's align some of the terms to MDN important terms

Work/company/startup ----- scope
Salary/Position ---- functions, variables and classes

Scope in JavaScript

What does JavaScript consider as scope?

There are two types of scope in JavaScript; local and global scope
Here is a cheat— anything inside {} is local scope and every other thing outside of {} is global scope.

You can also refer to anything inside {} as block scope.

Any {} that belongs to a function - is a type of local scope that we can call function scope, if it belongs to an if statement, I guess we can call it if scope, what if it belongs to a switch statement, Let's call it it switch scope.

Functions, variables and classes in JavaScript

What is JavaScript moving up?

There is nothing really to talk about here. If you have ever written and then run any line of code in JavaScript, you definitely know what a function, variable and class is in JavaScript.
Just to be clear, hoisting is particular about declaration of Functions, Variables and classes.

The following are not hoisted

Function calls
Variable assignments
Class instances

Hoisting Explained

How Variables and Functions are Moved to the Top of Their Scope at Runtime

Anatomy of scope

Whatever is being moved by JavaScript is moved to the top of the scope. Below is a visual representation of how JavaScript labels parts of your code.

1 // Top of the global scope
2
3 
4
5  const foo = 'hello global world';
6 
7 {
8  // Top of the local/block scope
9
10 
11   const foo = 'hello local world';
12
13
14 // Bottom of the local/block scope
15 }
16
17
18
19 // Bottom of the global scope

What is function, variable and class declaration in JavaScript?

When JavaScript is ready to move a function, variable or class, it moves only the declaration to the top of the respective scope. Below is a sample of what JavaScript considers to be declaration

Function declaration

 function salary() {
/* do something here*/
}

variable declaration

var postion;
let flag;

NOTE: const must be assigned at the point of declaration.

JavaScript has some shortcuts that allow programmers to declare and assign a value to a variable at once.

Example 1:

var position = 'CEO' // declaration + assignment
const salary = 10000.00 // this is the only way to declare and assign const variable
let flag = 🇳🇬 // declaration + assignment

The long version would have been
Example 2:

var position; // declaration 
postion = 'CEO' // Assignment
const salary = 10000.00 // this is the only way to declare and assign const variable
let flag; // declaration
flag = 🇳🇬  // Assignment

Class declaration

class salary {
/* put class methods and properties here*/
}

We just went through a process of mental model building. If you are a beginner, you will need some time for all of this to settle in, you might need to read over and over. I recommend that you follow along with testing your understanding, if possible, in your code editor.

When you are confident enough, you can go on to read the part 2 here. Moreover, you can always come back to part 1 for clarification.

Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.

JavaScript code block with Switch statements

Haastrup Elijah — Wed, 15 Feb 2023 10:41:04 +0000

I thought I knew about switch statement until I tried this

Switch (eventName) {
 case 'click':
      let me = 'bar'
      break;
 case 'drag': 
     let me = 'foo'
}

It didn't run not because switch statement is mean(😠), just to be clear, it has been my go-to when I need saving from if else if else if block hell.

It's just variable declaration with let and const, playing a fast one on me.

Well here is one unpopular fact about let, you cannot redeclare a variable that is already declared with let keyword within the same code block, same thing goes for const.

Why would I want to do redeclare let variable within a switch statement. You see, most of the time, the logic within each case in a switch statement could have similar logic with some modifications and I really should be able to redeclare variable in this situation, var can help but I have issue with it, it's global/function scoped, we don't want to risk global or function scope knowing what we are cooking inside our switch unless we really want them (the scopes i.e global and function) to.

So, I thought, If let want a block, I am just gonna give it to em,

Switch (eventName) {
 case 'click': {
      let me = 'bar'
       me = 'foo'
   console.log(me)
      break;
      }
 case 'drag': {
     let me = 'foo'
       me = 'bar'
   console.log(me)
     break;
     }
}

Finally, I got the genie trapped! The truth is, I have always seen this pattern in codebases, but never really figured what it was meant for. Now, I do. And it's interesting to tell you that this has nothing to do with switch statement.

Yes, you 'read' me right, you see, JavaScript's code block can exist within and independent of function/class declaration, switch, loop and conditional statements.

The piece of code below is a legal citizen of JavaScript

{
let bar = 'foo';
console.log(bar)
}

{
let bar = 'baz'
console.log(bar)
}

You don't believe me? Go ahead and see for yourself.

Using code block could also help resolve eslint no-case-delcaration issue.

A switch statement by default is considered a single code block, switch {}. Therefore, every declaration within each case belong to the same switch block scope and every block scoped declaration like function, class, let and const in any of the cases declared within the switch.

let eventName = 'drag';
Switch (eventName) {
 case 'click': 
     let me = 'bar'
         me = 'foo'
     console.log(me)
      break;
 case 'drag': 
   console.log(me)
     break;
}

When the case where any function, class or variable( letand const only) is declared in is not executed, we have buggy code in our hands.

Code like this in JavaScript is one reason you never trust JavaScript not to trip you off no matter how long you have been speaking the language.

There is so much to learn in JavaScript, till next time.
Happy Coding!

Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.