Question 05 / 14

Why is x initially a function and later a number?

Topic: Declaration instantiation

Declaration instantiation creates one binding, then later assignments replace the value stored in it.

Solve it with the execution visualizerStep through every binding, function call, and console output below.

Predict the output

Track the value of the single x binding at each console.log.

console.log(x)

var x = 10
console.log(x)

x = 20

function x() {}

console.log(x)
Reveal the answer and explanation

Expected output

[Function: x]
10
20

Why this happens

The function declaration initializes x with a function object during declaration instantiation. The var declaration does not create a second binding with the same name.

Evaluating var x = 10 assigns 10 to the existing x binding, so the second log prints 10.

The later assignment replaces 10 with 20. The function declaration is not evaluated again at its source position.

What this question tests

  • function declaration initialization
  • duplicate var declarations
  • binding reassignment

Runtime assumptions

Developer consoles format function objects differently; the first line represents the function x itself.

Specification references

JavaScript Code EditorDirectly edit or paste custom code
Step 0 of 0
StepSpaceRun
Press → (Step) or Space (Run)
Phase 1: Compilation(Hoisting & Memory Setup)
Phase 2: Execution(Line-by-line Evaluation)
Execution Step Breakdown

Press "→" / click "▶" to step line-by-line, or press "Space" / click "▶ Run" for auto-play.

Scope Chain
Lexical Environment Chain: Inner Scope → Outer [[Scope]] → Global (GO)
No active scope chain
CALL STACKStack of Execution Contexts (LIFO)
LIFO Stack Frames
Global Execution Context (GEC)
▶ Active Frame
HEAP & MEMORY SPACEAllocated Objects (GO, AO, FunctionObjects, ER)
ECMAScript Heap Area
No objects in memory
Console Output
console.log(...) Stream
No output generated yet