A Visual Guide to References in JavaScript

When you write let score = 7, JavaScript connects the name score to the value 7. The variable isn’t the value itself. It’s the name your code uses to get that value.

Now copy it:

copy received the value 7. Later, score = 10 only points the name score at a different value. It doesn’t create a live connection between score and copy.

This is the fork in the road. Most reference confusion comes from mixing up these two actions:

Changing a value inside an object is called mutation. The word sounds dramatic, but it just means “edit the existing object.”

Arrays can be mutated too. Methods like push, pop, and sort edit the existing array.

If two variables lead to that object, a mutation is visible through both variables. Reassigning one variable is not.

The word const sounds like “constant forever,” so this code can be surprising:

const settings = { theme: "light" };

settings.theme = "dark"; // allowed

This works because the variable settings still leads to the same object. We changed a property inside that object. We did not reassign the variable.

This version fails:

const settings = { theme: "light" };

settings = { theme: "dark" }; // TypeError

Now we’re trying to point settings at a different object. That is the part const prevents.

The same rule applies to arrays. A const array can still use push because the variable keeps leading to the same array. You just can’t replace it with another array.

Some developers say b is a reference to the object. That’s useful shorthand. It means b holds a value that lets JavaScript find that particular object.

You’ll also hear the word identity. An object’s identity is simply “which exact object is this?” Two objects may contain the same data and still be two different objects.

When you pass a value into a function, the parameter becomes a new local variable. JavaScript copies the value into that parameter.

For an object, the copied value still leads to the same object. That’s why a function can edit an object created somewhere else:

For a simple object, the spread syntax creates a new object and copies the properties into it:

const book = { title: "Dune", checkedOut: false };
const copy = { ...book };

copy.checkedOut = true;

console.log(book.checkedOut); // false
console.log(copy.checkedOut); // true

Now book and copy lead to different objects. Changing one top-level property won’t change the other.

Arrays work the same way with square brackets:

const original = [3, 1, 2];
const copy = [...original];

copy.sort();

console.log(original); // [3, 1, 2]
console.log(copy);     // [1, 2, 3]

This is called a shallow copy. “Shallow” means only the first level is new.

To update the name without touching the old state, copy every level on the path to the value you’re changing:

const next = {
  ...state,
  user: {
    ...state.user,
    name: "Lin"
  }
};

For primitives, === compares the values. Two separate strings containing "hello" are equal.

For objects, === asks whether both sides lead to the exact same object. It does not open the objects and compare every property.

Imagine a helper that returns the smallest number:

function smallest(numbers) {
  numbers.sort((a, b) => a - b);
  return numbers[0];
}

const prices = [30, 10, 20];
const lowest = smallest(prices);

lowest is 10, which looks correct. But prices is now [10, 20, 30]. The function sorted the original array because numbers and prices lead to the same array.

The safe version copies before sorting:

function smallest(numbers) {
  const sorted = [...numbers].sort((a, b) => a - b);
  return sorted[0];
}

The same question applies to any function or library call: does it return a new value, or does it edit the value I passed in? Method names don’t always tell you.