Objects & references

One object can have many names

In the Data types lesson you met the big split: primitives copy the value, while objects copy a reference. This lesson slows that sentence down until you can predict it in real programs. If two variables point at the same object, changing the object through one variable is visible through the other variable too.

A reference is the value JavaScript uses to reach an object. You do not see the reference directly; you see the object it leads to. For this lesson, imagine the reference as an address written on an envelope.

This matters in arrays, settings objects, function parameters, state updates, and any code that tries to avoid accidental mutation. Later lessons named Memory: primitives vs objects, Freezing, sealing & immutability, Immutability, and Messaging & structured cloning go deeper. Today we build the everyday mental model.

Primitives such as numbers, strings, booleans, null, and undefined behave like self-contained values. If you copy a number, changing one variable later does not change the other. Objects are different: the copied value is a reference to the same object.

let x = 1;
let y = x;
y = 2;
console.log(x); // 1

const a = { score: 1 };
const b = a;
b.score = 2;
console.log(a.score); // 2

The diagram below uses real objects and real property values, then draws a conceptual picture: variable names on the left, object cards on the right. It is not engine memory inspection; it is a teaching picture of the references your code created.

1const a = { score: 1 };2const b = a;3b.score = 2;4const c = { ...a };5c.score = 3;6const d = { ...a, stats: { ...a.stats } };

Notice the two separate questions. Are two variables pointing at the same object? And if there is a copy, are any nested objects still shared? We will return to the nested case in the shallow-copy section.

Function parameters follow the same rule. When you pass an object to a function, the parameter receives a copy of the reference. That means the function can mutate the shared object. But if the function reassigns the parameter, only that local parameter points somewhere new.

This behavior is often called call by sharing. It is not pass-by-reference in the sense that the function can replace the caller’s variable. It shares the object, not the caller’s binding.

1function addBadge(user) {2  user.badge = "mentor";3}4 5const ada = { name: "Ada" };Run6addBadge(ada);7console.log(ada.badge);

The Comparisons lesson taught that === means strict equality. With objects, strict equality checks identity: are these two references pointing at the exact same object? It does not compare keys and values.

1const a = { score: 1 };Run2const b = a;3const c = { score: 1 };4 5console.log(a === b);6console.log(a === c);7console.log({ score: 1 } === { score: 1 });

For simple flat objects, a content comparison can be written by checking that both objects have the same keys and each key has the same value. That is a choice your code makes; it is not what === does automatically.

A shallow copy creates a new top-level object and copies the top-level properties into it. The common forms are { ...obj } and Object.assign(, obj). Arrays have the same idea with [...array].

1const user = {2  name: "Ada",3  address: { city: "Pune" },4};5 6const shallow = { ...user };7shallow.address.city = "Kochi";8 9const deep = structuredClone(user);10deep.address.city = "Jaipur";11 12console.log(user.address.city);13console.log(deep.address.city);

In that code, shallow is a different top-level object, but shallow.address and user.address are the same nested object. Changing shallow.address.city changes that shared nested object, so the original user appears to change too.

Deep copies with structuredClone

A deep copy also copies nested data. Modern browsers and recent Node versions provide structuredClone(value), the same family of cloning rules used by web messaging APIs. It handles plain objects, arrays, Dates, Maps, Sets, and many other data values. It does not clone functions or DOM nodes; trying to clone a function throws a DataCloneError.

Use structuredClone when you truly need independent nested data. Do not use it as a reflex. Deep copies can be more expensive, and some objects represent things that should not be copied. If you need to update only one branch, copying only the changed path is often clearer.

const doesn’t freeze

The Variables lesson introduced const: it means the variable binding cannot be reassigned. It does not make the object immutable. You can still change properties on a const object, because the variable still points at the same object.

1const user = { name: "Ada" };2user.name = "Grace";     // allowed3// user = { name: "Lin" }; // TypeError if you run it4console.log(user.name);   // "Grace"

Object.freeze(user) is a separate tool, and it is shallow: it freezes the object itself, not every nested object inside it. The Freezing, sealing & immutability lesson goes into that topic later.

Where you’ll use this

References show up whenever code shares data. A few everyday examples:

• A function receives a settings object. If it changes settings.theme, the caller’s object changes too.
• UI state often needs a new object so change detection can see that something changed. A shallow copy is common for top-level updates.
• Tests often compare object contents, not object identity, because two correct functions can return equal-looking but different objects.
• Messages between browser contexts use structured cloning rules, which is why Messaging & structured cloning later deserves its own lesson.

Common misconceptions

Choose once, then read every explanation. Wrong answers teach the edge cases.

Key takeaways

• Variables that hold objects hold references to objects.
• Copying an object variable copies the reference, not the object.
• Function parameters share object references, but reassigning the parameter is local.
• === compares object identity, not matching contents.
• Spread and Object.assign are shallow; structuredClone copies cloneable nested data.
• const prevents reassignment of the binding, not mutation of the object.

Up next: Methods & this.