What will be the output? (Hoisting)
Medium•
Output questions are easy to memorize and easy to forget. Runtime mental-model reasoning is reusable across snippets and interview variants.
Quick Navigation: Runtime Mental Model • var let const and Function Nuance • Common Misconceptions and Interview Takeaway
Quick Decision Guide
Hoisting = creation-phase binding setup before execution.
- var: binding initialized to undefined - let/const: binding created but uninitialized (TDZ) - function declarations: binding initialized with function object
Interview signal: distinguish binding creation from runtime execution.
Runtime Mental Model
🔥 Insight
Use creation-phase vs execution-phase language.
phase 1: create lexical environment + bindings
phase 2: execute statements top-to-bottomvar let const and Function Nuance
console.log(a) // undefined
var a = 1
console.log(b) // ReferenceError
let b = 2
foo() // works
function foo() {}Nuance
•Function expressions assigned to var are not callable before assignment
•Class declarations behave like let/const with TDZ
Common Misconceptions and Interview Takeaway
Misconceptions
•"JS moves declarations" (imprecise mental model)
•"undefined equals not declared" (false: undeclared is ReferenceError)
🎯 Interview Takeaway
Answer outputs using environment creation semantics, not memorized rules-of-thumb.
Key Takeaways
1Hoisting is binding creation, not source reordering.
2var and let/const differ by initialization timing.
3TDZ explains ReferenceError behavior for lexical declarations.
4Runtime-behavior framing is more robust than memorized outputs.