JavaScript Hoisting

Hoisting in JavaScript is a way in which a function or a variable can be used before declaration. For example,

console.log(message);
var message="Hello Anup!!";

In the above example, the program produces the output as undefined.

Note: In hoisting, though it seems that the declaration has moved up in the program, the actual thing that happens is that the function and variable declarations are happens in Memory Creation Phase before Code Execution Phase.

Variable Hoisting

Only keyword var is hoisted and let and const does not allow hoisting in terms of variables and constants,

For example,

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

In the above example, variable a is used before declaring it. And the program works and displays the output 5. The program behaves as:

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

However in JavaScript, initializations are not hoisted, only declaration is hoisted. For example,

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

Output

undefined

The above program behaves as:

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

Only the declaration is moved to the memory in the compile phase. Hence, the value of variable a is undefined because a is printed without initializing it.

Also, when the variable is used inside the function, the variable is hoisted only to the top of the function. For example,

// program to display value
var a = 4;

function greet() {
    b = 'hello';
    console.log(b); // hello
    var b;
}

greet(); // hello
console.log(b);

Output

hello Uncaught ReferenceError: b is not defined

In the above example, variable b is hoisted to the top of the function greet and becomes a local variable. Hence b is only accessible inside the function. b does not become a global variable.

Note: In hoisting, the variable declaration is only accessible to the immediate scope.

If a variable is used with the let keyword, that variable is not hoisted. For example,

// program to display value
a = 5;
console.log(a);
let a; // error

Output

Uncaught ReferenceError: Cannot access ‘a’ before initialization

While using let, the variable must be declared first.

Function Hoisting

A function can be called before declaring it. For example,

// program to print the text
greet();

function greet() {
    console.log('Hi, there.');
}

In the above program, the function greet is called before declaring it and the program shows the output. This is due to hoisting.

However, when a function is used as an expression, an error occurs because only declarations are hoisted. For example;

// program to print the text
greet();

let greet = function() {
    console.log('Hi, there.');
}

Output

Uncaught ReferenceError: greet is not defined

If var was used in the above program, the error would be:

Uncaught TypeError: greet is not a function