hoisting

lifts identifiers to top of scope.

JS ⟩ scope ⟩ hoisting

hoists identifiers to the top of a scope (at compile-time)

var hoisting - declaration hoisted, value initialized to "undefined".
let/const/class hoisting - declaration hoisted, value "uninitialized"❗️
const requires initialization - must have with initial value❗️
function hoisting - declaration hoisted, value initialized to a function.

lexical declaration ( let / const / class )

is "uninitialized" first (at compile-time).
then initialized to its initial value (when execution reaches its declaration at runtime)
there's a temporal dead zone between these two states, be aware

hoisting priority

function declaration is hoisted first (function hoisting).
then variable hoisting (var hoisting / let/const/class hoisting).

function hoisting first❗️

declared variable cannot be accessed in the TDZ.

replit：hoisting & TDZ

const { log } = console;

function hi() {
    
    var x = "Hello";

    // block scope
    {
        // ----------------------------------------------------------------
        // ⭐️ the compiler WON'T check if `x` is referenced in the TDZ
        //    at compile-time, but will cause run-time error when running❗
        // ----------------------------------------------------------------
        x = "Howdy";    // ╮
                        // ⭐️ Temporal Dead Zone (TDZ) for `x`
                        // ╯  (can't access `x` in this zone❗)
        
        let x = "Hi";   // ⭐️ `x` declared here❗
        log(x);
    }
    
}

log('hello');    // ✅ 'hello' (this is OK.)

hi();            // ⛔ run-time error
//
// ⛔ ReferenceError: 
//    Cannot access 'x' before initialization
//    (note: this is a runtime error❗)

Previousparameter scope Nextfunction hoisting

Last updated 2 years ago

Was this helpful?