JavaScript Variables꞉ var, let, const

Quick Summary

• const - Use by default (can't reassign)
• let - Use when you need to reassign
• var - Don't use (old way, causes problems)

Main Differences

1. Scope (Where they work)

function example() {
  if (true) {
    var a = 1;    // Works everywhere in function
    let b = 2;    // Only works in this { } block
    const c = 3;  // Only works in this { } block
  }
  
  console.log(a); // ✓ 1
  console.log(b); // ✗ Error
  console.log(c); // ✗ Error
}

2. Reassignment

var a = 1;
a = 2;        // ✓ OK

let b = 1;
b = 2;        // ✓ OK

const c = 1;
c = 2;        // ✗ Error - can't change const

3. Objects and Arrays with const

// You CAN change what's inside const objects/arrays
const person = { name: "John" };
person.name = "Jane";  // ✓ OK - changing inside
person.age = 25;       // ✓ OK - adding property

const numbers = [1, 2, 3];
numbers.push(4);       // ✓ OK - changing inside
numbers[0] = 10;       // ✓ OK - changing element

// You CAN'T replace the whole thing
const person2 = { name: "Bob" };
person2 = { name: "Alice" };  // ✗ Error

Common Problems with var

Problem 1: Loops

// BAD - var doesn't work right in loops
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 3, 3, 3 (not what you want!)

// Why this happens:
// 1. Loop runs and creates 3 timeouts
// 2. All timeouts share the SAME 'i' variable
// 3. By the time timeouts run, loop finished and i = 3
// 4. So all 3 timeouts print the final value: 3

// GOOD - let works correctly
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 0, 1, 2 (what you want!)

// Why let works:
// Each loop iteration gets its own separate 'i' variable
// So timeout 1 gets i=0, timeout 2 gets i=1, timeout 3 gets i=2

Problem 2: Hoisting Confusion

// var gets "hoisted" - moved to top but set to undefined
console.log(x); // undefined (weird!)
var x = 5;

// What JavaScript actually does with var:
// var x;              // Declaration moved to top, value = undefined
// console.log(x);     // Prints undefined
// x = 5;              // Assignment stays in same place

// let/const give clear errors
console.log(y); // Error - can't use before declaring
let y = 5;

// Why let/const are better:
// They exist but can't be used until the line where you declare them
// This prevents bugs from using variables too early

Simple Rules to Follow

1. Always use const - unless you need to change the variable
2. Use let - when you need to reassign (like counters)
3. Never use var - it causes confusing bugs

Quick Examples

// Good modern JavaScript
const name = "John";           // Won't change
const users = [];              // Array that grows
let counter = 0;               // Will change in loop

for (let i = 0; i < 5; i++) {  // Use let in loops
  counter++;
  users.push(`User ${i}`);
}

// Bad old JavaScript
var userName = "John";         // Don't do this
var userList = [];             // Don't do this
var count = 0;                 // Don't do this

Memory Trick

Think of variables like boxes:

• var - Old messy box that moves around
• let - Clean box you can replace contents
• const - Locked box, but you can organize what's inside

References