Hoisting in Javascript: Javascript Interview Series

A guide to understanding hoisting in JavaScript

What if you are able to access a variable before its declaration? For somebody coming from a C programming background, this feature might sound pretty weird. However, this feature is one of the most important features of the JavaScript language.

In this article, we shall study hoisting in JavaScript and how it works for functions (generic and arrow ) and variables ( const, let, and var ) and also the temporal dead zone (TDZ ☠️ ☠️). So fasten your seat belts and let get started.

As per Kyle Simpson, hoisting can be described as follows “ Hoisting is a Javascript mechanism by which functions and variable declarations move to the top of their scope i.e memory space is allocated to them before they are initialized (or given a value )”.

Hoisting in variables ( let, const, and var )

To study the mechanism of hoisting in variables let's start off with an example.

var: The variables declared with var are hoisted i.e a memory space is allocated to them in the memory. However, the variable is still assigned the value ‘undefined’ as seen in figure 2.

Figure 1.

Figure 2.

let and const: The variables declared with let and const are also hoisted i.e a memory space is allocated to them in the memory. However, they are not initialized with the undefined placeholder(figure 4.) or any other value thus we get a Reference error ( stating variables have been used before initialization ). Variables with initialized values are visible in the global execution context.

Figure 3.

Figure 4.

Hoisting in generic functions ( with keyword function )

To study the mechanism of hoisting in generic functions read the below example.

Generic functions: The generic functions are hoisted and can be used before they are declared.

Figure 5.

Figure 6.

Hoisting in arrow functions ( with var, let, and const)

The hoisting in arrow functions works similarly to variables however the type of errors that are thrown if we access the variables before their declaration is different.

Arrow functions with var: The arrow functions declared using var will throw a Type error (stating that checkHoisting is not a function ). This is because variables with var are initialized with undefined and undefined is not a function in javascript.

Figure 7.

Figure 8.

Arrow functions with let and const: The arrow functions declared using let or const will throw a Reference error (stating that checkHoisting is used before initialization). The reason is that let and const are not initialized with undefined as explained earlier. Hence we get a reference error.

Figure 9.

Figure 10.

Temporal Dead Zone (TDZ ☠️ ☠️): Temporal dead zone is observed in cases of variables and arrow functions declared with let and const. Temporal dead zone is defined as the zone or the time between hoisting and the actual variable declaration. Accessing the variable in this zone gives a reference error.

Figure 11.

I hope you have understood the concept of hoisting in JS very well. Stay tuned to the JS interview series for more such articles.

More content at plainenglish.io