Temporal Dead Zone

tdz-1.js

{
  // The block has begun, we're in a new block scope. The TDZ for the "a" binding has begun
 
  var f = function() {
    // 2. Because f() is evaluated before `a` is actually declared, 
    // an exception will be thrown indicating to the author that
    // `a` is not yet defined.
    console.log(a); 
  };
 
  f(); // 1. f is called and results evaluated before the next line... 
  let a = 1; 
  // The `a` binding is now safe, but we never got here because f() killed us :(
  // that's ok, because we can fix this bug and celebrate the win!
}

tdz-2.js

{
  // The block has begun, we're in a new block scope. The TDZ for the "a" binding has begun
  // Declare `a` before use.
  let a = 1; 
  var f = function() {
    // 2. Because f() is evaluated after `a` is declared, 
    // the value of `a` will be logged.
    console.log(a); 
  };
 
  f(); // 1. f is called and results evaluated
}

Here's what I would also show:

{
// 1. The block has begun, we're in a new block scope. The TDZ for the "a" binding has begun
var f = function() {
  // 5. Because f() is evaluated after `a` is actually initialized,  it can be referenced without error
  console.log(a);
  };
//2. f function is now defined capturing a reference to the binding for a
// but, we're still in the TDZ for a
let a = 1;
//3. a is now initialized and we have exited it's TDZ

f(); // 4. f is called and results evaluated.
}

Also see http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/#tdz-temporal-dead-zone-for-parameters.