Hoisting & the temporal dead zone

In the Execution contexts lesson, you met two phases: a creation phase, then an execution phase. Hoisting is the visible result of that creation phase. Before the first line executes, JavaScript scans the scope and prepares declared names.

The tricky part is that different declarations arrive in different conditions. Function declarations arrive ready. var arrives with undefined. let, const, and class names exist, but they are uninitialized until execution reaches their declaration line. That uninitialized window is the temporal dead zone, or TDZ.

Try the replay. Line 2 can read a var, a let, or a missing name. The outcomes are real JavaScript behavior, and the tests for this lesson run the snippets in Node’s vm to prove them.

1console.log(greet());2console.log(score);3var score = 7;4let status = "ready";5function greet() { return "function ready"; }Run6console.log(status);

Function hoisting: declarations arrive ready

A function declaration is the friendliest form for early calls. During creation, JavaScript creates the function object and stores it in the function’s name. That is why this works:

console.log(double(4));
function double(n) {
  return n * 2;
}

The body is not executed during creation. It is merely attached to the name. Execution still starts at line 1, calls double, enters the function body, and returns 8.

This is useful for readability. Many teams put the main story first and helper declarations below it. That works when the helpers are declarations, not expressions assigned to variables.

var is older than let and const. It is hoisted and initialized to undefined during creation. The assignment stays exactly where you wrote it.

console.log(score); // undefined
var score = 7;
console.log(score); // 7

This is one reason modern JavaScript usually prefers Variables: let, const & var. var can hide bugs by producing a value instead of failing fast. If you expected 7, undefined is still a bug; it is just a quieter bug.

let, const, and class declarations are hoisted too, but not initialized. From the start of the scope until execution reaches the declaration line, the binding is in the temporal dead zone. “Temporal” means it is about time, not simply text position.

console.log(theme); // ReferenceError
let theme = "dark";

console.log(typeof Widget); // ReferenceError
class Widget {}

Class declarations behave like let here: the name is known, but reading it before the class declaration runs throws. The class itself is covered in Class basics later; for now, remember that class declarations are TDZ bindings.

1function readLater() {Run2  return secret;3}4let secret = "initialized";5console.log(readLater());

Default parameters can have a TDZ too. Parameters are initialized left to right, so function f(a = b, b = 1) reads b before b has been initialized. Swap them to function f(b = 1, a = b) and it works.

Function declarations are special. A function expression or arrow function is a value created when its assignment line executes. The variable that will hold that value follows the variable’s own hoisting rules.

1console.log(double(4));2function double(n) {Run3  return n * 2;4}

The punchline: var double = function... gives you an early undefined, so calling it throws TypeError. const double = () => ... gives you a TDZ binding, so even reading it for the call throws ReferenceError. The earlier Function expressions & callbacks lesson introduced the syntax; this lesson explains why the timing differs.

undefined vs not defined

These phrases sound similar but mean different things. undefined is a real JavaScript value. “Not defined” is part of a ReferenceError message saying scope lookup did not find a binding.

Sort the cases by what happens. This is the quickest way to check if you are distinguishing ReferenceError from TypeError and a real undefined value.

Where you’ll use this

Hoisting shows up whenever code is organized for humans. You might put helper declarations below the main flow, split setup across a file, or debug a stack trace that points to a line before a declaration.

console.log(renderGreeting("Ada"));

function renderGreeting(name) {
  return "Hello, " + name;
}

Best practice is still simple: declare variables near the top of the scope where you use them, initialize const immediately, and do not depend on early var reads. Hoisting knowledge is not a license to be clever; it is a debugging tool.

Common misconceptions

Every choice explains the outcome. For error questions, focus on which kind of error and why.

Key takeaways

• Hoisting is the creation phase preparing declared names, not text moving.
• Function declarations are callable before their declaration line runs.
• var is initialized to undefined; its assignment still runs later.
• let, const, and class are in the TDZ until initialized.
• undefined is a value; “not defined” means no binding was found.

Up next: Memory: primitives vs objects.