JavaScript Hoisting

Hoisting refers to the behavior where JavaScript moves the declarations of variables, functions, and classes to the top of their scope during the compilation phase. This can sometimes lead to surprising results, especially when using var, let, const, or function expressions.

• Hoisting applies to variable and function declarations.
• Initializations are not hoisted, they are only declarations.
• 'var' variables are hoisted with undefined, while 'let' and 'const' are hoisted but remain in the Temporal Dead Zone until initialized.

Before learning more about hoisting, it's important first to understand the Temporal Dead Zone

Temporal Dead Zone (TDZ)

The Temporal Dead Zone (TDZ) is the period in JavaScript between entering a scope and the initialization of variables declared with let or const, during which accessing them results in an error.

• Variables declared with let and const are hoisted but not initialized.
• Accessing these variables before their declaration throws a ReferenceError.
• Initialization occurs only when execution reaches the declaration line.
• TDZ exists only within the scope where the variable is declared.
• It applies only to let and const, not to var (which is initialized as undefined).

Note: The variable hello is hoisted, but it is not initialized until the assignment line is reached since it holds a function expression. Thus, calling hello() before its initialization throws a TypeError.

Types of Hoisting

Hoisting in JavaScript refers to moving declarations to the top of their scope before code execution.

1. Variable Hoisting with var

When you use var to declare a variable, the declaration is hoisted to the top, but its value is not assigned until the code execution reaches the variable’s initialization. This results in the variable being assigned undefined during the hoisting phase.

Note: The declaration var a is hoisted to the top, but a is initialized with undefined. Hence, logging results in undefined.

Note: var hoisting lifts declarations, not initializations.

2. Variable Hoisting with let and const

Unlike var, let and const are also hoisted, but they remain in a Temporal Dead Zone (TDZ) from the start of the block until their declaration is encountered. Accessing them before their declaration will throw a ReferenceError.

Note: The variable is hoisted, but it’s in the Temporal Dead Zone (TDZ) until the declaration line is executed.

3. Function Declaration Hoisting

Function declarations are hoisted with both their name and the function body. This means the function can be called before its definition in the code.

Note: The function declaration is hoisted, and the entire function definition is available before its position in the code.

4. Function Expression Hoisting

Function expressions are treated like variable declarations. The variable itself is hoisted, but the function expression is not assigned until the line of execution. This means calling the function before its assignment will result in an error.

Note: The variable hello is hoisted, but since it's a function expression, it’s not initialized until the line is executed.

5. Hoisting with let and const in Functions

Variables declared with let and const inside a function are hoisted to the top of the function's scope, but they remain in the TDZ. This prevents access to them before they are initialized.

Note: The variable x is hoisted inside the function but cannot be accessed until its declaration line due to the TDZ.

6. Hoisting with Classes

Classes are hoisted, but they cannot be accessed before they are declared, resulting in a ReferenceError.

Note: Although the class MyClass is hoisted, it cannot be accessed before its declaration due to the TDZ, which is why the code throws a ReferenceError.

7. Re-declaring Variables with var

With var, you can redeclare a variable within the same scope. This is a unique behavior compared to let and const.

Note: With var, the second declaration overwrites the first one without throwing an error.

8. Accessing Variables Declared Later in Loops

When using var in loops, the loop variable is hoisted to the function or global scope, which can cause unexpected behavior. If you use let, the variable is block-scoped and behaves as expected.

Note: The var i is hoisted, and all setTimeout functions share the same i reference, which results in the value 3 after the loop finishes.

9. Using Hoisted Functions with Parameters

Functions can be hoisted with their parameters, but any parameters passed to the function are still determined by the invocation, not by the hoisting.

Note : The entire function, including its parameters, is hoisted and available for use before the function's declaration in the code.

10. Hoisting in Nested Functions

Hoisting works within nested functions as well. Variables declared with var inside a function are hoisted to the top of that function scope.

Note: Both a and b are hoisted within their respective scopes (outer and inner functions), but their values are not set until the code execution reaches the initialization lines.