Hoisting

  • 14.1 var declarations get hoisted to the top of their closest enclosing function scope, their assignment does not. const and let declarations are blessed with a new concept called Temporal Dead Zones (TDZ). It’s important to know why typeof is no longer safe.

    1. // we know this wouldn’t work (assuming there
    2. // is no notDefined global variable)
    3. function example() {
    4.   console.log(notDefined); // => throws a ReferenceError
    5. }
    7. // creating a variable declaration after you
    8. // reference the variable will work due to
    9. // variable hoisting. Note: the assignment
    10. // value of `true` is not hoisted.
    11. function example() {
    12.   console.log(declaredButNotAssigned); // => undefined
    13.   var declaredButNotAssigned = true;
    14. }
    16. // the interpreter is hoisting the variable
    17. // declaration to the top of the scope,
    18. // which means our example could be rewritten as:
    19. function example() {
    20.   let declaredButNotAssigned;
    21.   console.log(declaredButNotAssigned); // => undefined
    22.   declaredButNotAssigned = true;
    23. }
    25. // using const and let
    26. function example() {
    27.   console.log(declaredButNotAssigned); // => throws a ReferenceError
    28.   console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
    29.   const declaredButNotAssigned = true;
    30. }

  • 14.2 Anonymous function expressions hoist their variable name, but not the function assignment.

    1. function example() {
    2.   console.log(anonymous); // => undefined
    4.   anonymous(); // => TypeError anonymous is not a function
    6.   var anonymous = function () {
    7.     console.log('anonymous function expression');
    8.   };
    9. }

  • 14.3 Named function expressions hoist the variable name, not the function name or the function body.

    1. function example() {
    2.   console.log(named); // => undefined
    4.   named(); // => TypeError named is not a function
    6.   superPower(); // => ReferenceError superPower is not defined
    8.   var named = function superPower() {
    9.     console.log('Flying');
    10.   };
    11. }
    13. // the same is true when the function name
    14. // is the same as the variable name.
    15. function example() {
    16.   console.log(named); // => undefined
    18.   named(); // => TypeError named is not a function
    20.   var named = function named() {
    21.     console.log('named');
    22.   };
    23. }

  • 14.4 Function declarations hoist their name and the function body.

    1. function example() {
    2.   superPower(); // => Flying
    4.   function superPower() {
    5.     console.log('Flying');
    6.   }
    7. }

  • For more information refer to JavaScript Scoping & Hoisting by Ben Cherry.