ES6 typeof throws an error

Question

ES5 typeof is considered safe, as it will not throw ReferenceError when checked agains a non-declared value. such as

console.log(typeof undeclaredVar); // undefined

however, when checking for typeof undeclaredLetConst in es6 it will throw an error only if the value was later on declared with a let or const. if it was declared with var it will work normally.

console.log(typeof undeclaredLetConst);
let undeclaredLetConst = "hello";  // ReferenceError

whats happening there?

Answer 1

Why it works with var declarations

When a JavaScript engine looks through a lexical scope block and finds a variable declaration with var, it hoists the declaration to the top of the function (or global scope if no "use strict" is present).

Hence the typeof will never fail as the variable its checking upon will be hoisted beforehand.

The Temporal Dead Zone (TDZ)

The TDZ is never named explicitly in the ECMAScript specification, but the term is used to describe why let and const declarations are not accessible before their declaration.

Why it fails with const and let

When a JavaScript engine looks through a lexical scope block and finds a variable declaration with let or const, it places the declaration in the TDZ. Any attempt to access a variable in the TDZ results in a runtime error.

The declaration is removed from the TDZ during runtime once the flow reaches the declaration itself.

console.log(typeof undeclaredLetConst);     // "undefined"

if (1) {
    let undeclaredLetConst = "no errors!";
}

undeclaredLetConst isn’t in the TDZ when typeof operation executes because it occurs outside of the block in which undeclaredLetConst is declared. That means there is no value binding, and typeof simply returns "undefined".

Source: An awesome book by Nicholas C. Zakas, Understanding ECMAScript 6.