Hoisting and Scopes in ES6

scopes.js

(function () {
  l1 = 'STEP 1';
  console.log(l1);          // Output: STEP 1

  if (true) {
    console.log(l1);        // Output: STEP 1
    var l1 = 'STEP 2';      // var isn't block-scoped, gets hoisted
    console.log(l1);        // Output: STEP 2
  }

  console.log(l1);          // Output: STEP 2

  if (true) {
    // console.log(l1);     // Uncaught ReferenceError: l1 is not defined (TDZ) 
                            // because l1 is hoisted but uninitialised
    let l1 = 'STEP 3';      // let is block-scoped
    console.log(l1);        // Output: STEP 3
  }

  console.log(l1);          // Output: STEP 2

  if (true) {
    l1 = 'STEP 4';
    console.log(l1);        // Output: STEP 4
  }

  console.log(l1);          // Output: STEP 4

  (function () {
    console.log(l1);        // Output: STEP 4
  })()
  
  (function () {
    console.log(l1);        // undefined
                            // because l1 is hoisted inside the function and initialised
    var l1 = 'STEP 5';      // var is function-scoped
    console.log(l1);        // Output: STEP 5
  })()

  console.log(l1);          // Output: STEP 4

  (function () {
    // console.log(l1);     // Uncaught ReferenceError: l1 is not defined (TDZ)
                            // because l1 is hoisted but uninitialised
    let l1 = 'STEP 6';      // let is function-scoped
    console.log(l1);        // Output: STEP 6
  })()

  console.log(l1);          // Output: STEP 4

  (function () {
    // console.log(l1);     // Uncaught ReferenceError: l1 is not defined (TDZ)
                            // because l1 is hoisted but uninitialised
    let l1 = 'STEP 6';      // let is function-scoped
    console.log(l1);        // Output: STEP 6

    if (true) {
      // var l1 = 'STEP 7'; // Uncaught SyntaxError: Identifier 'l1' has already been declared
      let l1 = 'STEP 7';
      console.log(l1);      // Output: STEP 7
    }
    console.log(l1);        // Output: STEP 6
  })()

  console.log(l1);          // Output: STEP 4

  (function () {
    console.log(l1);        // Output: STEP 4
    l1 = 'STEP 8';
    console.log(l1);        // Output: STEP 8
  })()

  console.log(l1);          // Output: STEP 8
})()