The True Face of var#

1
console.log(a); // undefined
2
var a = 10;

This is equivalent to:

1
var a;          // Compilation phase: declaration + initialized to undefined
2
console.log(a); // Execution phase: prints undefined
3
a = 10;         // Execution phase: assignment

Three critical points to remember:

• ✅ Declaration is hoisted
• ✅ Automatically initialized to undefined
• ❌ Assignment is not hoisted

This explains why you can access a variable that has been declared but not yet assigned without throwing a runtime error.

Function Scope of var#

1
function test() {
2
  console.log(a);
3
  if (false) {
4
    var a = 10;
5
  }
6
}
7
test(); // undefined

Even though if (false) never executes, var a is still hoisted and belongs to the entire function scope.

Function Declarations: Complete Hoisting#

1
foo();
2
function foo() {
3
  console.log('hello');
4
}

✅ Executes normally. During the compilation phase, function declarations complete both declaration and assignment (pointing directly to the function body). This is equivalent to:

1
function foo() {
2
  console.log('hello');
3
}
4
foo();

Function Expressions: Following var Rules#

1
foo(); // TypeError: foo is not a function
2
var foo = function () {
3
  console.log('hello');
4
};

Here, foo follows the exact same hoisting rules as var:

1
var foo;                    // Compilation phase: foo = undefined
2
foo();                      // Execution phase: undefined(), crashes immediately
3
foo = function () { ... };  // Assigned later

⚠️ Pay attention to error types:

• ReferenceError: The variable has not been declared at all.
• TypeError: The variable exists, but its type is incorrect (e.g., trying to invoke undefined as a function).

Precedence: Function Declarations > Variable Declarations#

1
console.log(foo);
2
var foo = 'bar';
3
function foo() {}

Output: ƒ foo() {}

Reason: During the compilation phase, both function declarations and variable declarations are hoisted, but function declarations take higher priority and overwrite the placeholder slot for variables of the same name. However, if the variable is assigned a value during the execution phase, it will overwrite the reference back:

1
console.log(foo); // ƒ foo() {}
2
var foo = 'bar';
3
function foo() {}
4
console.log(foo); // 'bar'

Enter the TDZ (Temporal Dead Zone)#

1
console.log(a); // ReferenceError
2
let a = 10;

From this, many jump to the conclusion that let is not hoisted. ❌ That conclusion is inaccurate.

In reality: let and const are hoisted, but they are not automatically initialized.

The ES6 specification introduced the Temporal Dead Zone (TDZ): spanning from the start of the scope up to the let / const declaration statement. During this window, although the variable already exists in the scope, it cannot be accessed, read, or written to.

1
{
2
  // TDZ starts
3
  console.log(a); // ❌ Throws ReferenceError
4
  let a = 10;      // TDZ ends
5
}

Core Differences: let vs var#

Summary in one line: var is hoisted and initialized; let / const are hoisted but uninitialized.

The Special Constraint of const#

1
const a; // SyntaxError: Missing initializer in const declaration

const not only lacks automatic initialization, but it must be assigned a value at declaration, otherwise a syntax error is thrown immediately.

Question 1: Scope Shadowing Traps#

1
var a = 1;
2
function foo() {
3
  console.log(a);
4
  var a = 2;
5
}
6
foo();

Answer: undefined

Explanation: Inside foo, var a is declared. Within the function scope, a is hoisted and initialized to undefined, shadowing the outer global variable a. Therefore, undefined is logged.

Question 2: Mixed Hoisting & TDZ#

1
console.log(typeof a);
2
var a = 1;
3
let b = 2;

Answer:

1
'undefined'      // typeof a
2
ReferenceError   // referencing b

Explanation: var a is hoisted and initialized to undefined, so typeof a safely returns 'undefined'. let b resides inside the TDZ, so referencing b (even using typeof b) immediately throws a ReferenceError. Recognizing typeof behavior inside the TDZ is a big bonus in technical interviews.

Question 3: var vs let in Loops#

1
for (var i = 0; i < 3; i++) {
2
  setTimeout(() => console.log(i), 0);
3
}
4
// Outputs: 3, 3, 3
5

6
for (let i = 0; i < 3; i++) {
7
  setTimeout(() => console.log(i), 0);
8
}
9
// Outputs: 0, 1, 2

Reason: var i — the entire loop shares a single function-scoped binding of i. let i — a new block-scoped binding for i is created for each iteration step. This is a practical demonstration of block scoping combined with hoisting rules.

Supporting Mutual Function Invocation#

1
function a() {
2
  b();
3
}
4
function b() {
5
  a();
6
}

Without hoisting, whichever function were placed first wouldn’t be able to find the other. Hoisting ensures all functions are registered during compilation, allowing mutual calls regardless of declaration order.

Historical Context#

JavaScript was originally designed as a lightweight browser scripting language. To lower the barrier to entry, early language designers opted for automatic variable initialization and fault tolerance over strict error throwing. While reasonable at the time, these decisions left behind the quirks we navigate today.