Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compile phase. This means that no matter where variables and functions are declared, they are moved to the top of their scope before code execution.
Hoisting of Variables
var Keyword
Variables declared with var are hoisted to the top of their function scope. However, only the declaration is hoisted, not the initialization. This can lead to unexpected results if not properly understood.
console.log(a); // undefined
var a = 10;
console.log(a); // 10
The code above is interpreted as:
var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10
let and const Keywords
Variables declared with let and const are also hoisted, but unlike var, they are not initialized with undefined. Instead, they are in a “temporal dead zone” (TDZ) from the start of the block until the declaration is encountered.
console.log(b); // ReferenceError: Cannot access ‘b’ before initialization
let b = 20;
console.log(b); // 20
console.log(c); // ReferenceError: Cannot access ‘c’ before initialization
const c = 30;
console.log(c); // 30
Hoisting of Functions
Function declarations are hoisted to the top of their scope, and the entire function definition is hoisted.
foo(); // “Hello, world!”
function foo() {
console.log(“Hello, world!”);
}
The code above is interpreted as:
function foo() {
console.log(“Hello, world!”);
}
foo(); // “Hello, world!”
Function Expressions
Function expressions are not hoisted. Only the variable declaration is hoisted, not the function assignment.
bar(); // TypeError: bar is not a function
var bar = function() {
console.log(“Hello, world!”);
};
The code above is interpreted as:
var bar;
bar(); // TypeError: bar is not a function
bar = function() {
console.log(“Hello, world!”);
};
Class Declarations
Class declarations are also hoisted, but like let and const, they are not initialized. They are in a temporal dead zone until the declaration is encountered.
const myCar = new Car(); // ReferenceError: Cannot access ‘Car’ before initialization
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
}
}
Summary
- Variable Hoisting with var: Declarations are hoisted to the top and initialized with undefined.
- Variable Hoisting with let and const: Declarations are hoisted to the top but not initialized, leading to a temporal dead zone.
- Function Declarations: Entire declarations are hoisted, making the function available before its actual definition in the code.
- Function Expressions: Only the variable declaration is hoisted, not the assignment, leading to potential errors if accessed before initialization.
- Class Declarations: Similar to let and const, they are hoisted but not initialized, leading to a temporal dead zone.
Understanding hoisting is crucial for avoiding common pitfalls related to variable and function declarations in JavaScript, enabling you to write more predictable and error-free code.