Value vs Reference

Value Types (The Glaze)

Numbers, strings, booleans, null, undefined, and symbols are primitives. When you assign one to another variable, you get an independent copy:

// Primitives: copied by VALUE (like mixing fresh glaze)
let a = 5;
let b = a;  // b gets a COPY of 5
b = 10;
console.log(a); // 5 — unchanged!
console.log(b); // 10

Reference Types (The Pot)

Objects, arrays, and functions are reference types. When you assign one to another variable, both point to the same object in memory:

// Objects: shared by REFERENCE (pointing to the same pot)
let pot1 = { color: "red", size: "large" };
let pot2 = pot1;  // pot2 points to the SAME object
pot2.color = "blue";
console.log(pot1.color); // "blue" — pot1 changed too!
// Both variables point to the same object in memory

See the Difference

Drag the glaze slider and the pot color to see how values and references behave differently:

The Reference Surprise

This is the foundation of why mutation is dangerous in React. If two variables point to the same object, changing one changes the other:

Summary