1. The Sticky Note Box Metaphor

Imagine a variable as a cardboard box with a sticky note on the front. Referencing the variable name on the sticky note lets you access or replace whatever data is currently stored inside the box.

2. Why It Matters

In modern JavaScript, choosing the right variable keyword (const vs let vs var) determines whether the data inside the box can be swapped out later and where in your program that box is visible.

3. The Three Variable Keywords

JavaScript gives us three ways to label our cardboard boxes:

1. const (Constant): The sticky note is glued tight with superglue. You cannot reassign a new value to this variable after initialization. Always default to const!
2. let (Reassignable): The box has a reusable lid. Use let when you know the stored value needs to change over time (such as loop counters, scores, or toggle states).
3. var (Legacy): The old way of declaring variables (before ES6 in 2015). var lacks block scoping and behaves unpredictably due to hoisting. Avoid using var in modern codebases!

// Always default to const for values that stay fixed
const maxConnections = 100;

// Use let when value reassignment is expected
let activeUsers = 0;
activeUsers = activeUsers + 1; // Valid reassignment (now 1)

console.log(maxConnections); // 100
console.log(activeUsers);    // 1

4. Visualizing Variable Scoping

const and let are block-scoped (contained strictly inside curly braces {}), whereas legacy var leaks out into outer functions:

[ Global Scope ]
 ├── const appName = "DevLoom"
 └── Block Scope { }
      ├── const localSecret = "xyz" (Invisible outside block)
      └── let counter = 5           (Invisible outside block)

5. Common Mistakes

• Reassigning const: Trying to reassign a const variable (pi = 3.14) throws an uncaught TypeError: Assignment to constant variable.
• Confusing const with Object Mutability: Declaring an object or array with const prevents reassigning the variable pointer, but you CAN still add or modify properties inside the object (user.name = "Sarah" is valid!).

6. Try It Yourself

Write it yourself. The tests below run against your code.

function updateScore(points) {
  const currentScore = 0;
  currentScore = currentScore + points;
  return currentScore;
}

7. Next Steps

Default to const everywhere. Switch to let only when reassignment is strictly needed. Next, let's look at combining variables with text using Template Literals!