Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 3.5 — Hoisting and the Temporal Dead Zone
JavaScript · Example 3 of 3 ES2015+

The shadow that throws

Inside the block, the inner let x is hoisted to the top of the block, so x already means the inner one. f(5) doesn't need a's default, so b is never read early.

Before running a scope, JavaScript first registers every declaration in it: function declarations arrive complete, var variables start as undefined, and let, const and class exist but can't be touched until their line runs; that forbidden stretch is the temporal dead zone.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 6 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Predict the output: console.log(a); var a = 5; console.log(a);

02

Fix this code without removing any line, only by moving one: console.log(double(4)); const double = n => n * 2;

03

Write a short example showing that a function written above a let can still use it when called afterwards.

Explain it without notes

01

What is hoisting? Describe what happens to function declarations, var, and let/const.

02

What is the temporal dead zone, and why was it designed this way?

03

Why does calling a function expression stored in var before its line give a TypeError, while one stored in const gives a ReferenceError?

04

Why does let x = 1; { console.log(x); let x = 2; } throw?

The shadow that throws ES2015+

Console

(nothing was printed)

Expected console output

outer
ReferenceError: Cannot access 'x' before initialization
inner
ReferenceError: Cannot access 'b' before initialization
6