Module 2 · Variables & Data Types

Reference Types

Intermediate9m read5m practice14m total

ObjectsArraysReferencesCopying

Introduction

Objects, arrays, and functions are reference types. Variables do not hold the whole object directly; they hold a reference value that points to the object.

This explains why assigning an object to another variable can share mutations, why two identical-looking arrays are not equal, and why shallow copies still share nested objects.

Why This Matters

Reference semantics power a huge number of JavaScript interview questions: mutation through aliases, React state bugs, shallow-copy surprises, equality checks, and function arguments that mutate caller-owned objects.

Theory

What is a reference value?

When you write const user = { name: 'Ada' }, the variable stores a reference to an object in memory. Copying the variable copies the reference value, not the object itself.

Concept	Behaviour	Example consequence
Assignment	Copies the reference value	`b = a` makes both variables point to the same object.
Mutation	Changes the shared object	`b.name = 'Grace'` is visible through `a`.
Reassignment	Changes only one binding	`b = {}` does not move `a`.
Equality	Compares references	`{ } === { }` is `false`.
Shallow copy	Copies top-level properties only	Nested objects are still shared.

Pass by reference value

JavaScript is often described as passing objects by reference, but the precise model is pass by value of the reference. A function receives a copy of the reference value. It can mutate the object that reference points to, but if it reassigns the parameter to a new object, the caller's variable still points to the original object.

Shallow vs deep copy

A shallow copy ({ ...obj }, Object.assign, array.slice, array.concat) creates a new container but reuses nested references. A deep copy recursively copies nested values. Modern environments provide structuredClone for many data types, but it does not clone functions and has its own limitations. JSON-based copying loses dates, undefined, symbol, functions, Map, Set, and more.

Equality by identity

Objects are equal only when they are the same object reference. Two arrays with the same items are still different arrays, so [1, 2] === [1, 2] is false.

Visual Diagrams

Two variables, one object

const a = { count: 1 }
const b = a

a -----> { count: 1 }
          ^
b --------+

b.count = 2 changes the same object

Assignment copied the reference value, so both names point to one object.

Shallow copy shares nested objects

original --> { profile --> { city: 'Delhi' } }
copy     --> { profile -----------+ }
                         same nested object

Top-level object is new; nested profile is shared.

Spread syntax is shallow, not recursive.

Code Examples

Mutation through an alias

Both variables point to the same object until one binding is reassigned.

Loading…

Shallow copy surprise

The spread creates a new top-level object, but profile is still shared.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1const a = { count: 1 };
2const b = a;
3 
4b.count = 2;
5console.log(a.count);
6 
7function replace(obj) {
8  obj.count = 3;
9  obj = { count: 4 };
10}
11 
12replace(a);
13console.log(a.count);
14console.log(a === b);
15console.log([1, 2] === [1, 2]);

Coding Exercises

Update one user immutably

Medium

Implement renameUser(users, id, nextName). Return a new array. Only the matching user object should be copied with the new name; non-matching user objects should keep their original references.

Interview Questions

1Are objects passed by reference in JavaScript?

More precisely, JavaScript passes the reference value by value. The function parameter receives a copy of a reference to the same object. Mutating the object through that parameter affects the caller-visible object. Reassigning the parameter to a new object affects only the local parameter binding.

Asked at:GoogleMetaNetflixAmazon

Follow-ups

How do shallow copies differ from deep copies?
Why is `{}` === `{}` false?

Quiz

1. What does `{ ...user }` do when `user.profile` is an object?

2. Why is `[1, 2] === [1, 2]` false?

Summary

Objects, arrays, and functions are reference types.
Assignment copies the reference value, so aliases can share mutations.
JavaScript passes object references by value: mutation is visible, parameter reassignment is not.
Shallow copies create a new container but still share nested references.

Cheat Sheet

Reference types: objects, arrays, functions.

Assignment: copies the reference value, not the object.

Equality: identity-based (a === b only if same object).

Function calls: can mutate shared object; cannot reassign caller's binding.

Copying: spread/Object.assign/slice are shallow; use structuredClone or custom logic for deep copies.