JS Hoisting cheatsheet | 2 mins read only

JavaScript Hoisting Cheat Sheet

What is Hoisting?

• Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope (script or function).

Key Points

• Only declarations are hoisted, not initializations.
• Both variable and function declarations are hoisted.
• Function expressions are not hoisted.
• let and const declarations are hoisted but not initialized.

Variable Hoisting

var Declarations

• var variables are hoisted to the top of their function scope.
• They are initialized with undefined.

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

let and const Declarations

• let and const variables are hoisted to the top of their block scope.
• They are not initialized; accessing them before initialization results in a ReferenceError.

console.log(y); // ReferenceError
let y = 10;

console.log(z); // ReferenceError
const z = 15;

Function Hoisting

Function Declarations

• Function declarations are hoisted to the top of their scope.
• They are fully hoisted, including their definition.

hoistedFunction(); // "Hello, World!"

function hoistedFunction() {
    console.log("Hello, World!");
}

Function Expressions

• Function expressions are not hoisted.
• They are treated like variable assignments and are initialized only when the execution reaches that line.

nonHoistedFunction(); // TypeError: nonHoistedFunction is not a function

var nonHoistedFunction = function() {
    console.log("Hello, World!");
};

Arrow Functions

• Arrow functions behave like function expressions and are not hoisted.

arrowFunction(); // TypeError: arrowFunction is not a function

var arrowFunction = () => {
    console.log("Hello, Arrow!");
};

Class Hoisting

• Classes are hoisted but not initialized.
• Accessing a class before its declaration results in a ReferenceError.

new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor() {
        console.log("Class created");
    }
}

Temporal Dead Zone (TDZ)

• The TDZ is the time between entering scope and variable declaration where variables are in an uninitialized state.
• Accessing a variable in the TDZ results in a ReferenceError.

{
    console.log(a); // ReferenceError: Cannot access 'a' before initialization
    let a = 3;
}

Best Practices

• Declare all variables at the top of their scope to avoid confusion.
• Use let and const instead of var to prevent unexpected behavior.
• Be mindful of the TDZ when using let and const.