With the help of examples, you will learn about JavaScript hoisting in this tutorial.

In JavaScript, hoisting is a behavior in which a function or variable can be used before declaration. As an example,

// using test before declaring
console.log(test);   // undefined
var test;

The above program runs, but the output is undefined. The above software behaves as follows:

// using test before declaring
var test;
console.log(test); // undefined

Because the variable test is just declared and has no value, it is assigned an undefined value.

Visit JavaScript Variables to learn more about variables.

Note: while hoisting appears to move the declaration up in the program, what actually happens is that the function and variable declarations are added to memory during the build step.

Variable Hoisting

In terms of variables and constants, the keyword var is hoisted, whereas let and const are not.

As an example,

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

Variable and is utilized before it is declared in the preceding example. And the software is operational and displays the output 5. The software behaves as follows:

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

However, in JavaScript, initializations are not hoisted. For example,

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

During the compile process, only the declaration is moved to memory. As a result, the value of variable an is undefined because it is written without being initialized.

When the variable is utilized within the function, it is hoisted just to the top of the function. As an 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

Variable b gets hoisted to the top of the function hello in the preceding example and becomes a local variable. As a result, b is only available within the function. b is not made a global variable.

Note: The variable declaration in hoisting is only accessible to the immediate scope.

When a variable is used using the let keyword, it is not hoisted. As an example:

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

Output:

Uncaught ReferenceError: Cannot access ‘a’ before initialization

When using let, the variable must first be declared.

Function Hoisting

A function can be invoked before it is declared. As an example:

// program to print the text
greet();

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

Output

Hi, there

The function greet is called before declaring it in the preceding program, and the output is displayed. This is because of hoisting.

However, an error arises when a function is used as an expression because only declarations are hoisted. As an example:

// program to print the text
greet();

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

Output

Uncaught ReferenceError: greet is not defined

If var had been used in the preceding program, the error would be:

Uncaught TypeError: greet is not a function

• Other programming languages, such as Python, C, C++, and Java, do not generally support hoisting.
• Hoisting can have a negative impact on your program. It’s also a good idea to declare variables and functions before using them to avoid hoisting.
• When dealing with variables, let is preferable to var.

You may like:

continue and break Statements in JavaScript