Javascript Hoisting

Are you confused about javascript hoisting?
Don't worry! From this blog, your confusion will go away and you will get a clear idea about javascript hoisting. So.......let's start!

What is Javascript Hoisting?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. But...but ..Technically this will not happen.

Whenever any javascript code is executed Global Execution context
(If you don't know, read this) is created.
It has two phases one is the Creation phase and the other one is the Execution phase.

The variables and functions are put into memory before the execution phase. This will help us to use a function or a variable before it is declared. This behavior is known as Hoisting.

Let me show you what is happening...

Hoisting in variables

  var a;            //Declaration 
  a = 5;            //Initialization
  console.log(a);    //Prints 5

In the above code, first variable a is declared and then initialized and it is used.

  a = 5;            //Initialization
  console.log(a);   
  var a;            //Declaration 

What will you think the above code will print? It will print an error?
No, it prints the value of a. How it prints the value of a. Let me show using the global execution context.

The above diagram shows that the global execution context is created, in that two phases are there(Creation phase and Execution phase).

In the creation phase code is not executed, only the memory is allocated. So, the javascript will allocate memory for each function and variable. This is how for variable a memory is allocated and undefined assigned.

In the Execution phase, the javascript will run the code line by line. So, it will assign the value 5 for the variable a and then prints the value(shown below). Because the line initialization line comes before the console.log.

So, before executing the code the javascript will allocate memory for all variables. Due to this behavior, we can able to access the variable without an error. (If you still don't understand read this).

Only Declarations are hoisted

    console.log(a);  //prints undefined
    a = 5;           // Initialization
    var a;           // Declaration
    console.log(a);  //Prints 5

Why the first console.log print undefined not 5? Is Hoisting is not working?

No, hoisting is happening. Only Declarations are hoisted not initialization. It means in the creation phase only memory is allocated, values are not assigned. In the execution phase, values are assigned, until that it is undefined. In the execution phase until the second line(a =5) value of the variable a, is undefined. After the second line, the values are assigned to the variable. So, it prints the value 5 in the last line.

Function Hoisting

let a=5,
    b=5;

let result = add(a,b);
console.log(result);

function add(x,y){
  return x+y; 
}

The above code works perfectly fine. Because in the creation phase the javascript copies the function code to the add variable(shown below), instead of assigning undefined like variables.

The above diagram shows that in the creation phase the javascript assigns undefined for variables, but....for functions, it assigns the code. So, in the execution phase wherever the function is called it give the code, and do the work.

Functions expressions are not hoisted

let a=5,
    b=5;

let result = add(a,b);   //Prints “TypeError : add is not a function”

console.log(result);     

var add = function(x,y){
  return x+y; 
}

If you execute the code, it will show the following result.

   “TypeError : add is not a function 

Let's look into Global execution for the above code,

Here add is considered as a variable and assigned undefined value.
So, if you call it as a function it will produce a TypeError.

Conclusion

So, we have learned that when you run the code, the Global Execution context is created. In that, there are two phases, which is the Creation phase and the Execution phase. In the creation phase, for variables memory is allocated and for function, code is copied. Due to this behavior, we can able to access the variable before it is declared.
This is known as "Hoisting in Javascript".

Thank you for reading the article. If you like it please share it with your friends. If you have any questions, feel free to ask in the comments.

Happy Coding!!😀