Var, Let, and Const: Scope, Hoisting, and TDZ Explained

The Core Difference: Scope

The most significant and impactful difference between var and the modern let/const is how they handle scope. Scope determines where in your code a variable is accessible. In JavaScript, there are three main types: Global Scope, Function Scope, and Block Scope.

Let's watch a segment of a video that provides a clear, practical demonstration of these scope types.

As the video showed, var and let/const follow different rules:

Function Scope (var)

A variable declared with var is scoped to the nearest enclosing function. If it's not inside a function, it's scoped globally. It completely ignores block-level constructs like if, for, or standalone {} blocks. This behavior can lead to unexpected results.

Consider this classic example involving a for loop and setTimeout:

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
// Expected output might be 0, 1, 2.
// Actual output: 3, 3, 3

Why does this happen? Because the var i is function-scoped (or globally scoped here), there is only one i variable that all three setTimeout callbacks share a reference to. By the time the callbacks execute (after about 100ms), the loop has already completed, and the value of i is 3.

Block Scope (let and const)

let and const introduced block scope to JavaScript. This means a variable declared with let or const is only accessible within the nearest enclosing pair of curly braces {}, which includes if statements, for loops, and while loops.

Let's fix the previous example using let:

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
// Actual output: 0, 1, 2

This works as expected because let creates a new i variable for each iteration of the loop. Each setTimeout callback captures a different instance of i with the value for that specific iteration (0, 1, and 2, respectively). This behavior is far more intuitive and helps prevent a common class of bugs.

Hoisting and the Temporal Dead Zone (TDZ) Revisited

We know from our last lesson that let and const are hoisted, but unlike var, they are not initialized. The period from the start of the block until the declaration line is the Temporal Dead Zone (TDZ).

The TDZ is not just a quirk; it's an intentional design feature to help you write better code. It prevents you from accidentally using a variable that hasn't been assigned a value yet, a common source of bugs with var.

Let's dive deeper with an excellent video that uses the browser's debugger to show you exactly what's happening under the hood.

The video makes it clear: let and const are hoisted (memory is set aside), but they are kept in an uninitialized state until the JavaScript engine executes their declaration line. Trying to access them before this point results in a ReferenceError. This contrasts sharply with var, which is initialized with undefined, allowing you to access it without an error, potentially masking bugs.

Re-declaration and Re-assignment

The final key differences lie in whether you can re-declare or re-assign values to these variables.

Here is a summary of the rules:

• var: Allows both re-declaration and re-assignment within the same scope. This can be problematic as you can accidentally overwrite a variable without any warning.

  var a = 10;
  var a = 20; // No error
  a = 30;     // No error
  console.log(a); // 30
  

• let: Allows re-assignment but does not allow re-declaration in the same scope. This prevents accidental overwrites.

  let b = 10;
  // let b = 20; // SyntaxError: Identifier 'b' has already been declared
  b = 30;     // This is fine
  console.log(b); // 30
  

• const: Allows neither re-declaration nor re-assignment. The variable must be initialized at the time of declaration.

  const c = 10;
  // const c = 20; // SyntaxError: Identifier 'c' has already been declared
  // c = 30;       // TypeError: Assignment to constant variable.
  console.log(c); // 10
  

A crucial point about const that trips up many developers: it creates a constant binding, not a constant value. This means that while you cannot re-assign the variable itself, you can mutate the contents of the object or array it refers to.

const user = { name: "Alice" };
// user = { name: "Bob" }; // This is illegal (TypeError)

user.name = "Bob"; // This is perfectly legal!
console.log(user.name); // "Bob"

Summary and Best Practices

We've covered the three major areas of differentiation. This table summarizes everything concisely.

Given these behaviors, the modern JavaScript best practice is:

1. Use const by default. This makes your code more predictable by preventing accidental re-assignment.
2. Use let only when you know you need to re-assign a variable, such as a loop counter or a value that needs to be updated.
3. Avoid using var. Its function-scoping and hoisting behavior can lead to subtle bugs that let and const are designed to prevent.

Conclusion

In this lesson, we systematically compared var, let, and const, solidifying your understanding of their roles in modern JavaScript. You can now confidently explain the differences in their scoping mechanisms, hoisting behavior, and rules for modification.

Key Takeaways:

• Scope: var is function-scoped, leading to potential issues in loops and blocks. let and const are block-scoped, providing more intuitive and safer behavior.
• Hoisting & TDZ: All three are hoisted, but var is initialized to undefined, while let and const enter the Temporal Dead Zone (TDZ) and throw a ReferenceError if accessed before their declaration line.
• Mutability: var and let can be re-assigned, but const cannot. However, const does not make objects or arrays immutable; their contents can still be changed.

In our next lesson, we will explore the scope chain. Having just mastered the rules of scope for individual variables, we will now see how JavaScript resolves variable names when you have functions nested inside other functions.