JavaScript Hoisting

Understanding Hoisting in JavaScript

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope (either global or function scope for var, or block scope for let and const) before code execution. This means you can conceptually use a variable or function before it’s explicitly declared in your code.

It’s important to understand that only the declarations are hoisted, not the initializations or assignments. Let’s explore this with var, let, const, and functions.

Hoisting with var

Variables declared with var are hoisted to the top of their function scope (or global scope if declared outside a function). If you use a var variable before its declaration, it will have the value undefined.

Consider this example:

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

Behind the scenes, JavaScript interprets this as:

var myVar; // Declaration is hoisted to the top
console.log(myVar); // myVar is undefined at this point
myVar = 5; // Initialization happens here
console.log(myVar); // myVar is 5

Hoisting with let and const (Temporal Dead Zone)

Variables declared with let and const are also hoisted, but they are not initialized. They are in a ‘temporal dead zone’ (TDZ) from the start of their block until the declaration is encountered. Accessing a let or const variable in its TDZ results in a ReferenceError.

This helps prevent bugs by ensuring you cannot use a variable before it’s declared.

Example with let:

// console.log(myLetVar); // Throws ReferenceError: Cannot access 'myLetVar' before initialization
let myLetVar = 10;
console.log(myLetVar); // Output: 10

The same behavior applies to const declarations.

Function Hoisting

Function declarations are fully hoisted. This means you can call a function declaration before it appears in your code.

greet(); // Output: Hello from a hoisted function!

function greet() {
  console.log("Hello from a hoisted function!");
}

However, function expressions (including arrow functions assigned to variables) are not hoisted in the same way. If they are assigned to var, the variable declaration is hoisted but its value (the function itself) is undefined until the assignment. If assigned to let or const, they are subject to the TDZ.

// myFuncExpr(); // Throws TypeError: myFuncExpr is not a function (if var) or ReferenceError (if let/const)

var myFuncExpr = function() {
  console.log("Hello from function expression!");
};

// myArrowFunc(); // Throws ReferenceError: Cannot access 'myArrowFunc' before initialization

const myArrowFunc = () => {
  console.log("Hello from arrow function!");
};

myFuncExpr(); // Works
myArrowFunc(); // Works

Best Practice: Declare Before Use

While hoisting is a feature of JavaScript, relying on it can make code harder to read and understand. Modern JavaScript development encourages declaring variables and functions before they are used. Using let and const helps enforce this by throwing errors if you access them in the TDZ.

Always declare all variables at the beginning of their scope (top of the function or block). This improves code clarity and helps avoid potential bugs related to hoisting.

Using ‘strict mode’ ('use strict'; at the top of your script or function) can also help catch some common errors, although it doesn’t change hoisting behavior itself, it makes some previously silent errors throw exceptions.

For a deeper understanding of scopes and the TDZ, refer to the MDN Web Docs on let (Temporal Dead Zone) and Hoisting.