Hoisting in JavaScript

Hoisting might sound a bit confusing but it’s really not, let’s see how.

Image for post
Image for post

What is Hoisting ?

Hoisting is a JavaScript mechanism where variables and function declarations are available before the execution starts, regardless of whether their scope is global or local. In other words, functions and variables are hoisted in JavaScript.

Let’s see how hoisting works for variables and function declarations below :

Hoisting for Function Declarations

Before the execution starts, all the function declarations are present in the memory object. A property is created in the memory object, which points to the functions.

In the below snippet, as we all know, in this case, the result will be 5.

function add(a, b){
console.log(a + b); //5
}
add(2,3)

Now, let’s see what happens when we do it the other way round.

add(2,3)function add(a, b){
console.log(a + b); //5
}

In the above snippet, the function is called before it is declared and the result is the same without any error being thrown, this is hoisting in action. The function declaration is stored in the memory before the code is executed. When the code executes, the function is already available for us to use.

Now, we all are aware of the term function expressions right ? So let’s see if hoisting works for function expressions.

const add = function(a, b){
console.log(a+b); //3
}
add(1,2);

The above snippet is a function expression, where we get the desired result when the code is executed, i.e 3. Now let’s try and see what happens when we do it the other way round.

add(1,2);const add = function(a, b){
console.log(a+b); //error
}
When we run the above code this is the error thrown
When we run the above code this is the error thrown
When we run the above code this is the error thrown

This does not work because it is a function expression and not a function declaration. So let’s note that Hoisting works only for function declarations and not function expressions.

Hoisting for Variables

So let’s see how hoisting works for variables

console.log(foo); //undefined
var foo = 10;
console.log(foo); //10
Image for post
Image for post
Result for the above snippet

In the above code we have used the variable before we declare it and it gives us undefined. This is how hoisting works for variables. The memory is scanned for variable declarations before the execution phase and the variables are set to undefined. Variables which do not have a value yet are always set to undefined.

console.log(abc); // undefined
var abc= 23;
function foo(){
console.log(abc); //undefined
var abc= 65;
console.log(abc); //65
}
foo();
console.log(abc); //23
Image for post
Image for post

The variable inside the function gets its own execution context and prints the result where as the variable outside the function is stored in the global execution context of the memory.

So, we know how hoisting works in JavaScript :) Thank you.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store