Hoisting in JavaScript

In JavaScript, Hoisting is a mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that we can use variables and functions before they are declared in our code.

Lets us discuss about how hoisting works with some examples.

1. Variable Hoisting

JavaScript only hoists the declarations, not the initializations. This means that if we declare a variable and initialize it later, the declaration is hoisted, but the initialization remains where it is.

Let us see the code snippet below:

console.log(myVar); // Output: undefined
var myVar = 5;
console.log(myVar); // Output: 5

Explanation:

The JavaScript engine will interpret the code as if it were:

var myVar;
console.log(myVar); // Output: undefined
myVar = 5;
console.log(myVar); // Output: 5

2. Function Hoisting

Function declarations are also hoisted. You can call a function before it is declared in the code.

Example:

console.log(myFunction()); // Output: "Hello, World!"

function myFunction() {
return "Hello, World!";
}

Explanation:

The JavaScript engine interprets the code as if it were:

function myFunction() {
return "Hello, World!";
}

console.log(myFunction()); // Output: "Hello, World!"

The entire function declaration is hoisted, so you can call myFunction before its actual declaration.

3. Function Expressions and Hoisting

Function expressions are not hoisted in the same way as function declarations. If you use a function expression, only the variable declaration is hoisted, not the function definition.

Example:

console.log(myFunc); // Output: undefined
console.log(myFunc()); // Error: myFunc is not a function

var myFunc = function() {
return "Hello!";
};

Explanation:

The JavaScript engine interprets the code as:

var myFunc;
console.log(myFunc); // Output: undefined
console.log(myFunc()); // Error: myFunc is not a function

myFunc = function() {
return "Hello!";
};

Here, var myFunc; is hoisted, but the function expression myFunc = function() { ... } is not. Therefore, myFunc is undefined until the assignment happens.

4. let and const Hoisting

• The const keyword was introduced in ES6 to allow immutable variables i.e. variables whose value cannot be changed once assigned.
• A const variable is hoisted to the top of the block.

Variables declared with let and const are also hoisted, but they are not initialized. They are placed in a “temporal dead zone” from the start of the block until the declaration is encountered.

Example:

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization

let myLet = 10;
console.log(myLet); // Output: 10

Explanation:

Although myLet is hoisted, it is not accessible until the declaration is processed due to the temporal dead zone. Accessing it before the declaration throws a Reference Error.

Summary

Understanding hoisting is important for JavaScript developers to avoid any unexpected behavior and write more predictable code.

• Variable Declarations: var declarations are hoisted and initialized to undefined, while let and const declarations are hoisted but not initialized.
• Function Declarations: Entire function declarations are hoisted, so you can call the function before its declaration.
• Function Expressions: Only the variable declaration is hoisted, not the function assignment.
• let and const: Hoisted but not initialized; accessing them before their declaration results in a ReferenceError.