Hoisting in JavaScript

In JS, hoisting allows function, variables and classes be referenced before declared.

for example,

1myName("Amy");
2
3function myName(name) {
4  console.log("My name is " + name);
5}
6
7// My name is Amy
8

• Declaration & Initialization
  • Hoisting of var

    • var declaration is be hoisted, but initialization isn't !

    • The initial value of var is undefined .

    • see the example from mdn

      1console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
      2var num; // Declaration
      3num = 6; // Initialization
      4console.log(num); // Returns 6 after the line with initialization is executed.
      5
      

      1console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
      2var num = 6; // Initialization and declaration.
      3console.log(num); // Returns 6 after the line with initialization is executed. 
      4
      

      1console.log(num); // Throws ReferenceError exception - the interpreter doesn't know about `num`.
      2num = 6; // Initialization
      3
      

      If we doesn't declare num , it won't be hoisted.

  • Hoisting of let and const

    • There is hoisting action in let and const variable.

    • Unlike var, there's no default value of let and const hoisting.

      1console.log(a) // ReferenceError: Cannot access 'a' before initialization                                                                    
      2let a = 10
      3
      

    • Temporal dead zone (TDZ)

      • The TDZ start at the beginning of the scope.
      • The TDZ end at the let variable is fully initialized.
      • example 1

        1// (O)
        2// TDZ starts at beginning of scope
        3const func = () => console.log(letVar); // OK
        4
        5let letVar = 3; // End of TDZ (for letVar)
        6func(); // Called outside TDZ!
        7
        8// returns 3
        9
        

        the func is called in TDZ

        1// (X) Exception !!!
        2// TDZ starts at beginning of scope
        3const func = () => console.log(letVar); // OK
        4
        5// Within the TDZ letVar access throws `ReferenceError`
        6func(); // <--------- the function is called in TDZ 
        7let letVar = 3; // End of TDZ (for letVar)
        8
        9// Cannot access 'letVar' before initialization
        10
        

      • example 2 foo is be called in TDZ

        1// (X) Exception !!! 
        2// TDZ starts at beginning of scope
        3  console.log(bar); // undefined
        4  console.log(foo); // ReferenceError
        5  var bar = 1;
        6  let foo = 2; // End of TDZ (for foo)
        7
        8// Cannot access 'foo' before initialization
        9
        

      • example 3 a is be hoist in the test function scope (is be called in TDZ)

        1// (X) Exception !!! 
        2
        3var a = 10
        4function test(){
        5  console.log(a)
        6  let a
        7}
        8test()
        9
        10// Cannot access 'a' before initialization
        11
        

Sources

• https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
• https://blog.techbridge.cc/2018/11/10/javascript-hoisting/ (can see the info about JS interpreter and compiler down bellow the article)