Explain the difference in hoisting between `var`, `let`, and `const`
TL;DR
var declarations are hoisted to the top of their scope and initialized with undefined, allowing them to be used before their declaration. let and const declarations are also hoisted but are not initialized, resulting in a ReferenceError if accessed before their declaration. const additionally requires an initial value at the time of declaration.
Hoisting differences between var, let, and const
var hoisting
var declarations are hoisted to the top of their containing function or global scope. This means the variable is available throughout the entire function or script, even before the line where it is declared. However, the variable is initialized with undefined until the actual declaration is encountered.
console.log(a); // Output: undefinedvar a = 10;console.log(a); // Output: 10
let hoisting
let declarations are also hoisted to the top of their block scope, but they are not initialized. This creates a "temporal dead zone" (TDZ) from the start of the block until the declaration is encountered. Accessing the variable in the TDZ results in a ReferenceError.
console.log(b); // ReferenceError: Cannot access 'b' before initializationlet b = 20;console.log(b); // Output: 20
const hoisting
const declarations behave similarly to let in terms of hoisting. They are hoisted to the top of their block scope but are not initialized, resulting in a TDZ. Additionally, const requires an initial value at the time of declaration and cannot be reassigned.
console.log(c); // ReferenceError: Cannot access 'c' before initializationconst c = 30;console.log(c); // Output: 30