JavaScript Hoisting

In this tutorial, you will learn about JavaScript hoisting with the assistance of examples.

Introduction to the JavaScript hoisting

At the point when you execute a bit of JavaScript code, the JavaScript engine makes the global execution setting.

The global execution setting has two stages: creation and execution.

During the creation stage, the JavaScript engine moves the variable and function declarations to the top of your code. This element is known as hoisting in JavaScript.

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

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

The above program works and the output will be undefined. The above program behaves as

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

Since the variable test is only declared and has no value, undefined value is assigned to it.

If you want to learn more about variables, visit JavaScript Variables.

Note: In hoisting, however, it appears to be that the declaration has moved up in the program, the actual thing that happens is that the function and variable declarations are added to memory during the compile stage.

---

Variable Hoisting

In terms variables and constants, catchphrase var is hoisted and let and const doesn’t allow hositing.

For instance,

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

In the above example, variable a is used prior to declaring it. What’s more, the program works and shows the output 5. The program behaves as:

// 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;

Output

undefined

The above program behaves as:

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

Just the statement is moved to the memory in the compile stage. Subsequently, the value of variable a is undefined on the grounds that an is printed without introducing it.

---

Likewise, when the variable is used inside the function, the variable is hoisted distinctly to the top of the function. For instance,

// 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 turns into a local variable. Thus b is just available inside the function. b doesn’t turn into a global variable.

To learn more about local and global variables, visit JavaScript Variable Scope.

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.');
}

Output

Hi, there

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

---

In any case, when a function is used as an expression, an error happens on the grounds that only declarations are hoisted. For instance;

// 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

Note: Generally, hoisting isn’t performed in other programming languages like Python, C, C++, Java.

Hoisting can cause undesirable results in your program. Furthermore, it is best to pronounce variables and functions first prior to using them and avoid hoisting.

In the case of variables, it is better to use let than var.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS Functions