JS Variables

JavaScript Variables: var, let, & const

Variables are named containers used to store data values in memory. JavaScript provides three keywords for variable declaration: var (ES5 legacy), let (ES6 block-scoped), and const (ES6 block-scoped constant).

Variable Scope & Binding Comparison

flowchart TD
    Decl["Variable Declaration"] --> VarCheck{"Which Keyword?"}
    VarCheck -- "var" --> FunctionScope["Function / Global Scoped (Hoisted as undefined)"]
    VarCheck -- "let" --> BlockScope1["Block Scoped (Reassignable, Temporal Dead Zone)"]
    VarCheck -- "const" --> BlockScope2["Block Scoped (Read-Only Binding, Must Initialize)"]

Declaration Matrix

Practical Code Example

// Demonstrating var vs let vs const scope & mutability

// 1. var function-scope issue demo
function testVarScope() {
  var x = 10;
  if (true) {
    var x = 20; // Re-declares and overwrites x in function scope!
    console.log(`Inside block (var x): ${x}`); // 20
  }
  console.log(`Outside block (var x): ${x}`); // 20 (Polluted!)
}
testVarScope();

// 2. let block-scope behavior
function testLetScope() {
  let y = 10;
  if (true) {
    let y = 20; // Isolated to this block
    console.log(`Inside block (let y): ${y}`); // 20
  }
  console.log(`Outside block (let y): ${y}`); // 10 (Safe!)
}
testLetScope();

// 3. const object mutation
const userConfig = { theme: "dark", lang: "en" };
userConfig.theme = "light"; // Allowed! Object properties are mutable.
console.log("Updated userConfig:", userConfig);

// userConfig = {}; // Un-commenting throws TypeError: Assignment to constant variable.

Best Practices & Gotchas

• Default to const: Use const for all variable declarations by default.
• Use let When Mutation is Required: Use let only when you know the variable value will be reassigned (e.g., loop counters, accumulators).
• Avoid var Entirely: Legacy var scoping leads to subtle hoisting bugs and unexpected global scope leaks.

Self-Check Challenge

What will console.log(a) print if placed BEFORE var a = 5; vs BEFORE let a = 5;?