Today, we’re going to take a look at the phenomenon that happens in JavaScript that many people find surprising and perhaps a bit confusing. It’s called Hoisting” in JavaScript. In this article, we are going to take a look at JavaScript Hoisting and how it actually works.

So, Let’s take a look at the code below. I have my simple variable ‘a’ and function ‘b’ which logs the text – ‘Called b!’ in the developer console. Later on, we invoke the function ‘b’, and we log the variable ‘b’ in the developer console.

var a = 'Hi there';
function b() {
console.log('Called b!');
}
b();
console.log(a);


That’s what we see if we run the code. Exactly what you expected.

Now, let’s do something different that in other programming languages you expect not to work at all. Let’s invoke the function ‘b’ and try to log the variable ‘a’ before they are defined.

b(); // invoking before declaration of function b
console.log(a); // log the value of variable before declartion
var a = 'Hi there';

function b() {
console.log('Called b!');
}


Now, what do you expect to happen? Well, in most most other programming languages you would probably expect an error because programming languages execute their code one line at a time and since we have invoked function b before it was defined. That’s what you would normally expect. But JavaScript is not like that. When we run the code, see what happens in the console.

As you can see, it successfully invoked the function but when it comes to variable ‘a’, it is undefined. Does it mean that the variable doesn’t exist in the memory? Let’s see what happens when I remove the variable declaration and try to execute the code below.

b();
console.log(a);

function b() {
console.log('Called b!');
}


I should get an error like this.

It returns me an “Uncaught ReferenceError” saying variable a is not defined”. Isn’t the undefined means not defined ? Well, not really ! undefined is one of the primitive data types available in JavaScript. It means that the variable exists and it has a value of undefined. Let’s take a look at the code below. Can you guess the output?

var a;
console.log(a);


It is undefined. It basically means that the variable exists but value is undefined.

That makes sense. Now, coming to the point. To understand hoisting, we have to understand how the global execution context is set up by the JavaScript Engine.

Two phases in Global Execution Context

There are two phases in the Global Execution Context. The first phase is the Creation phase, then comes the Execution phase. In the creation phase, there are 4 important things that is done by the JavaScript Engine.

• Sets up the Global Object (window)
• Sets up the this keyword
• Allocates memory for the functions and variables.
• Assigns variable declarations a default value of undefined.

So, the JavaScript engine goes through our code, finds all the function statements (excluding function expressions), variables (excluding let or const) and sets up memory spaces for those functions/variables. This process is known as Hoisting.

In the execution phase, the variable and functions exists in memory, so our code begins to execute line by line, it can access them. It can access all function statements! However, when it comes to variables, it’s a bit different. So, the JavaScript Engine when it sets up the memory space for variables, it doesn’t know what the value of the variable is until it starts to execute. All variables in JavaScript are initially set to ‘undefined’. But functions are sitting on the memory entirely.

Final words

It’s always a bad idea to rely on ‘JavaScript Hoisting’ because it can create bugs that are hard to debug. You might get caught up in the trap. Make sure you always use the new ES6 let and const, since variables delared using let and const are hoisted but you cannot access them before the actual declaration is evaluated at runtime.

Do you like Naimul Haque's articles? Follow on social!