Hoisting & temporal dead zone In JavaScript

In JS hoisting refers to the process in which interpreter moves the variable, function or classes deceleration to the top of their scope(to know more about scope refer to the video ) prior to the execution of the code.

First let’s see some examples to understand the concept of hoisting

var name;
console.log(name); //Returns 'undefined' from hoisted var declaration
name="mayank"

console.log(num); // Returns 'undefined' from hoisted var declaration (not 10)
var num = 10; // Initialization and declaration.
console.log(num); // Returns 10 after the line with initialization is executed.

fun();

function fun(){
  console.log("Hello from the fun");  // Returns Hello from the fun
}

Now we have seen the few examples and on the basis of those examples let’s understand the concept of hoisting. but first what actually hoisting means.

In JS hoisting refers to the process in which interpreter moves the variable, function or classes deceleration to the top of their scope(to know more about scope refer to the video in eye button) prior to the execution of the code.

Moving to the top doesn’t mean it literally move the variables/functions to the top of the scope it’s just the basic understanding but it’s not actually right

actually the execution context plays the role in here, when execution context begins it has two phases creation phase & execution phase.

In creation phase memory allocation takes place for the variables and if the variable is declared with var keywork then a special value undefined is assigned to it.

and then execution happens in execution phase and it just simply print the value.

💡 JavaScript only hoists declarations, not initializations!

now let’s go back to examples and try to understand the hoisting in case of variable declarations.

console.log(num); // Returns 'undefined' from hoisted var declaration (not 10)
var num = 10; // Initialization and declaration.
console.log(num); // Returns 10 after the line with initialization is executed.

in this case as soon as the execution context got created first the variable num get allocated in memory and initialized with special value undefined.

and then begins the execution when first line got executed the value is undefined then num got initialized with value 10 in second line and in 3rd line it prints value 10. so now you got how it’s working in case of variables declared with var keyword one thing to keep in mind, it doesn’t work in same way for let and const that we will see in later part of this video.

Now let’s understand function hoisting. It’s kind of same as in case of variables.

as the execution context start the creation phase put the function declaration into the memory and the execution phase do its work of executing the function.

Let’s see this with the help of an example as well

fun();
function fun(){
  console.log("Hello from the fun");  // Returns Hello from the fun
}

so in this example The execution context creates the memory for the function and puts the entire function declaration of fun in it.

and the execution phase executes the function

Putting the entire function declaration ahead into the memory at the creation phase is called Function Hoisting.

fun();

var fun = function() {
  console.log("Hello from the fun");  
}

//returns error: Uncaught TypeError: fun is not a function

But why we are getting error in this code🤷‍♂️ for this the reason is the here the function is not being hoisted instead it is assigned to a variable and that variable is being hoisted and when a variable got hoisted, in that case variable name moves to the top of the current scope — not the assignment, which is totally different in case of function hoisting as When a function declaration is hoisted, the whole function body is moved to the top of the current scope, so in this case fun is being treated as variable declared with var and before execution of line 2 & 3 fun is equal to undefined that’s why we are getting this error fun is not a function as we are trying to invoke a variable which is not a function

there is a reason for this and that is JavaScript only hoists declarations, not initializations!

before ending this video let’s see how variable hoisting with let and const differs from variable declared with var keyword. let and const variables are also get hoisted but unlike var there is no default initialization value.

a reference error will be thrown if the variable declared with let and const is read before it’s initialization.

let’s see this with an example.

console.log(num); // error: Uncaught ReferenceError: Cannot access 'num' before initialization
let num = 10; // Initialization and declaration.

console.log(num); // error: Uncaught ReferenceError: Cannot access 'num' before initialization
const num = 10; // Initialization and declaration.

there is one small concept known as Temporal Dead Zone let’s understand that as well here only

The Temporal Dead Zone is a behavior in JavaScript that occurs when declaring a variable with the let and const keywords, but not with var. In ECMAScript 6, accessing a let or const variable before its declaration (within its scope) causes a ReferenceError. The time span when that happens, between the creation of a variable’s binding and its declaration, is called the temporal dead zone.

Thanks for reading.

"Don't miss out" Follow my Social handles👉
Subscribe my YouTube channel😊
Instagram😊 || Twitter😊

If you find this helpful and want to support💲 Buy Me Coffee☕