Faisal Ahmed

Hoisting in JavaScript

Hoisting is one of the most confusing topics for javascript beginners. When I started learning javascript, I found this strange and was very confused.

Today I will try to explain hoisting as easy as possible. Before driving deep into theory, lets see some cases of hoisting

Case 1

a = 5

var a
console.log(a)

Now what will be printed in console if the above program is executed ? If you already know hoisting, your answer will be 5 with a big smile.

But if you are a beginner of javascript ( specially migrating from another programming language ), you might think “ Assigning value even before declaring a variable ”. Sounds like egg before chicken.

Case 2

console.log(a)
var a = 5

Some may think this program will through reference error, other may think this program will also print 5 in console just like previous case.

But in this case the output will be undefined.

Case 3

console.log(a)
b()
var  a= 5
function b(){
  console.log('hello from function b')
    
}

This program will output

undefined
hello from function b

If you don’t understand what is happening in above programs, don’t panic. By the end of this article you will understand why the above programs are behaving this way.

To understand why above scenarios , we must know how javascript execution context works.

Execution Context of JavaScript

JavaScript executes a program in two phases

  • Creation Phase
  • Execution Phase

Creation Phase

This phase allocates memory to variables and functions.This phase recognizes where variables and functions are declared in the program and allocates memory space for them. However there is a difference between variable and function memory allocation. While functions are entirely placed in the memory space, variables never gets any value assigned in this phase. Even if we write

var a = 5

Js engine will execute as

var a
a = 5

and only first line var a will be taken care of in this phase.

Execution Phase

In this phase, JavaScript executes line by line of the program. By the time this phase begin executing, js engine has set memory space for all existing variables and functions (in creation phase). In this phase, js engine assigns value to variables.

Explanation of Examples

Case 1

a = 5;
var a;
console.log(a);

When Creation Phase reads variable declaration var a , it allocates memory for a. In execution phase, when js engine sees a = 5 , it assigns 5 to it. In this case, a = 5 is executed before console.log(a).So when console.log(a) executes, it sees 5 as the value of variable a.

Case 2

console.log(a);
var a=5;

for simplicity above program can also be written as

console.log(a);
var a;
a=5;

Like case 1, memory allocation for variable a has already been taken care of in creation phase, so the program will not through reference error.

But in execution phase console.log(a) is executed before a = 5. As no value is set to variable a till that time. So js engine consoles undefined as default value to every variable.

Case 3

By this time, we have understood why case 3 prints undefined. As I said before memory allocation for variable and function is not same. when js engine finds a function, it allocates memory for entire function. That’s why executing function b doesn’t result in undefined.

However if we modify case 3 as bellow

console.log(a)
b()
var  a= 5
function b(){
console.log('hello from function b')
console.log(c)
var c = 5
}

what will be consoled ? I hope, by this time we all can answer this with big smile ^-^

Originally published on Medium.

Next →