Hoisting in JavaScript moves variable and function declarations to the top of their scope before execution, but the behavior varies between old (ES5) and modern (ES6+) JavaScript. In ES5, var variables are hoisted with undefined, and function declarations are fully hoisted, making them callable anywhere. In ES6+, let and const are hoisted but enter a Temporal Dead Zone (TDZ), causing errors if accessed before declaration. Arrow functions are not hoisted and must be declared before use.

The Temporal Dead Zone (TDZ) is the period where let and const variables are inaccessible until declared.

Example: All Forms of Hoisting 

console.log(myVar); // undefined
console.log(myLet); // Error: Cannot access 'myLet' before initialization
console.log(myFunc()); // "I am a function!"
console.log(myArrow); // TypeError: myArrow is not a function

var myVar = "I am var!";
let myLet = "I am let!";
function myFunc() {
  return "I am a function!";
}
const myArrow = () => "I am an arrow function!";
  • Explanation:
    • myVar (with var) is hoisted with undefined.
    • myLet (with let) is in TDZ, causing a ReferenceError.
    • myFunc (function declaration) is fully hoisted and works.
    • myArrow (arrow function) is not hoisted, throwing a TypeError.

Resources