Hoisting is a feature in Javascript which moves all the variable and function declarations to the top of the code (This statement doesn't mean that the code is physically moved to the top.). As we all know, Javascript engine creates execution context where it runs the Javascript code. There are two phases in the execution contexts - Creation phase and the Execution phase. Creation phase is the phase where hoisting takes place. Now, let's try to understand how hoisting works with the help of examples.

Variable Hoisting

Javascript has three ways with which we could declare variables. They are var, let and const. Each of them are different from each other in terms of usage, scope and hoisting. You could read more about variable declaration over here. The important point to note here is that, during variable hoisting, only the variable declaration part will be moved to the top of the code leaving the assigned value behind.

Case 1

console.log(icecream); // Prints undefined
var icecream = "Vanilla";

In the above code snippet, we are trying to use the variable even before declaring it. This looks like it will throw an error. But does it ? This is where hoisting comes into picture. Javascript engine on running this code at first, creates an execution context. As soon as the execution context is created, it begins with the creation phase. During the creation phase, the engine parses the code, splits the declarations and initialisations into two statements and moves all the declarations to the top of the code. All the variables declared using the var keyword will be initialised with a default value undefined when they are hoisted. This is the reason why it prints undefined rather than an error when Javascript executes the above code.

Case 2

console.log(icecream); // Prints ReferenceError: icecream is not defined
let icecream = "Vanilla";

When Javascript engine executes the above code, it throws a reference error. Why does this happen ? Shouldn't it print undefined ? Are let declared variables really hoisted ? Well, let variables are also hoisted but they are little different when compared with var. Javascript engine on running this code, creates an execution context. As soon as the execution context is created it begins with the creation phase. During the creation phase, the engine parses the code, splits the declarations and initialisations into two statements and moves all the declarations to the top of the code. Now comes the difference, all the variables that are declared using the let keyword will not be having a default value like that of var, instead, they will be marked as TDZ (Temporal Dead Zone) mode when they are hoisted. This just means that the variables do exists, but they are not accessible until they are initialised with a value. This is the reason why Javascript throws a reference error when let declared variables are hoisted.

Case 3

console.log(icecream); // Prints ReferenceError: icecream is not defined
const icecream = "Vanilla";

What about const declared variables ? Well, const variables are also hoisted and they work exactly the same way as that of let in terms of hoisting. This is the reason why we get the same error when const declared variables are also hoisted.

Function Hoisting

Hoisting in which the function declaration will be moved to the top of the code is known as function hoisting.

Case 1

getIcecream(); // Prints Vanilla Icecream
function getIcecream() {
  console.log("Vanilla Icecream"),
}

Javascript engine on running the above code, creates an execution context and starts the creation phase. During the creation phase, it moves all the variable and function declarations to the top of the code. In this case, function declaration getIcecream would be moved to the top of the code. Soon after the creation phase, execution phase get's started where the code will be executed. Since the function getIcecream was already declared during the creation phase, on calling getIcecream would print the expected output rather than an error.

Case 2

icecream(); // Prints TypeError: icecream is not a function
var icecream = function () {
  console.log("Vanilla Icecream")
}

Javascript engine on running the above code, creates an execution context and starts the creation phase. During the creation phase, it moves all the variable and function declarations to the top of the code. In this case, var icecream is assigned to a function, this statement is called a function expression. As the engine identifies the var variable icecream, it moves the declaration to the top of the code and assigns a default value undefined, leaving the function code behind. During the execution phase, when it encounters the statement icecream(), it will throw a type error as the engine expected a function but instead got an undefined. This is the reason why function expressions are not hoisted. What about arrow functions ? Well, same thing applies in the case of arrow function too. This means that arrow functions are also not hoisted.

I hope this clears how hoisting works in Javascript. If you feel this article was useful, please do show your love and share this to your fellow beings via your social media who could make maximum use of this. Always feel free to connect with me on twitter, linkedIn or email.

Until we meet again, The Mallu Dev signing off 👋 Cheers 🥂