ProfileDima's FE Handbook

Primitive Types vs Reference Types

You copy an object to a new variable, modify the copy, and suddenly the original changes too. You compare two identical-looking arrays with === and get false. You pass a number to a function, change it inside, and the original stays the same — but do the same with an object and it mutates.

If any of this has ever confused you, you're not alone. The difference between primitive and reference types is one of the most important — and most misunderstood — concepts in JavaScript.

What Are Primitive and Reference Types?

JavaScript has two categories of data types, and they behave completely differently.

Primitive types are the simple, atomic values: string, number, boolean, null, undefined, symbol, and bigint. When you work with primitives, you're working with the actual value itself. Think of them as sticky notes — each variable holds its own copy of the data.

Reference types are everything else: objects, arrays, functions, dates, maps, sets — anything created with new or {} or []. When you work with references, you're not holding the actual data — you're holding a pointer to where the data lives in memory. Think of them as house addresses — multiple variables can point to the same house.

Why Does This Distinction Exist?

This isn't arbitrary — it's about efficiency and practicality.

Primitives are small and fixed in size. A number is always 64 bits. A boolean is essentially 1 bit. Copying them is cheap, so JavaScript just copies the value directly.

Objects, on the other hand, can be massive. An array might have millions of elements. Copying the entire thing every time you assign it to a new variable would be incredibly slow and wasteful. Instead, JavaScript stores the object in one place (the "heap") and passes around references — lightweight pointers that say "the data you want is over there."

This design makes JavaScript fast, but it also means you need to understand when you're copying values and when you're copying references.

Let's See It in Action

Basic Example: Primitives Copy by Value

let a = 10;
let b = a;  // b gets a COPY of the value

b = 20;     // Changing b doesn't affect a

console.log(a); // Output: 10
console.log(b); // Output: 20

Each variable holds its own independent copy. Changing one has zero effect on the other.

Basic Example: References Copy by Reference

let person1 = { name: "Dima" };
let person2 = person1;  // person2 gets the same REFERENCE

person2.name = "Ana";   // Changing person2 changes the shared object

console.log(person1.name); // Output: Ana
console.log(person2.name); // Output: Ana

Both variables point to the exact same object in memory. There's only one object — two variables just have different names for it.

Real-World Usage: Function Arguments

This distinction matters enormously when passing data to functions:

// Primitives: function gets a copy
function double(num) {
  num = num * 2;
  return num;
}

let myNumber = 5;
double(myNumber);
console.log(myNumber); // Output: 5 — unchanged!

// References: function gets the same reference
function addSkill(user) {
  user.skills.push("JavaScript");
}

let developer = { name: "Dima", skills: [] };
addSkill(developer);
console.log(developer.skills); // Output: ["JavaScript"] — mutated!

This is why you'll hear people debate "pass by value" vs "pass by reference." In JavaScript, everything is technically passed by value — but for objects, that value IS a reference.

Watch Out: Equality Comparison Gotcha

// Primitives compare by value
console.log(5 === 5);           // true
console.log("hello" === "hello"); // true

// References compare by reference, NOT content
console.log({} === {});         // false — two different objects!
console.log([] === []);         // false — two different arrays!

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(arr1 === arr2);     // false — same content, different references

const arr3 = arr1;
console.log(arr1 === arr3);     // true — same reference

This trips up so many developers. Two objects with identical content are NOT equal unless they're literally the same object in memory.

Watch Out: Accidental Mutation

// ❌ Dangerous: modifying the original when you meant to copy
function processItems(items) {
  items.sort();  // sort() mutates the array!
  return items.slice(0, 3);
}

const original = [3, 1, 4, 1, 5, 9, 2, 6];
const topThree = processItems(original);

console.log(original); // Output: [1, 1, 2, 3, 4, 5, 6, 9] — sorted! Not what we wanted.

Here's the fix — create a copy first:

// ✅ Safe: copy before mutating
function processItems(items) {
  const copy = [...items];  // Spread creates a shallow copy
  copy.sort();
  return copy.slice(0, 3);
}

const original = [3, 1, 4, 1, 5, 9, 2, 6];
const topThree = processItems(original);

console.log(original); // Output: [3, 1, 4, 1, 5, 9, 2, 6] — unchanged!

Advanced: Shallow vs Deep Copying

The spread operator and Object.assign() only create shallow copies:

const original = {
  name: "Dima",
  address: {
    city: "Berlin"
  }
};

// Shallow copy — nested objects are still shared!
const shallowCopy = { ...original };

shallowCopy.name = "Ana";           // Safe — primitive
shallowCopy.address.city = "Paris"; // Danger — same nested object!

console.log(original.name);         // Output: Dima — unchanged
console.log(original.address.city); // Output: Paris — changed!

For true independence, you need a deep copy:

// Modern solution: structuredClone (Node 17+, modern browsers)
const deepCopy = structuredClone(original);

// Or the classic JSON trick (with limitations)
const deepCopy2 = JSON.parse(JSON.stringify(original));

Interview Classic: What Will This Output?

function modify(obj, num) {
  obj.value = 100;
  num = 100;
}

const myObj = { value: 1 };
let myNum = 1;

modify(myObj, myNum);

console.log(myObj.value); // ?
console.log(myNum);       // ?

Answer: 100 and 1

The object is mutated because the function receives the same reference. The number is unchanged because the function receives a copy of the value.

How to Think About This

Here's a mental model that sticks:

Primitives are like photocopies. When you assign let b = a, you're making a photocopy. Write on the copy all you want — the original is safe.

References are like sharing a Google Doc link. When you assign let obj2 = obj1, you're not making a copy — you're sharing the same document. Anyone with the link can edit it, and everyone sees the changes.

💡 Remember: Ask yourself: "Am I holding the actual data, or just a pointer to it?" For primitives, you hold the data. For objects, you hold a pointer.

Here's a quick reference:

| Type | Stored | Compared By | Copied By | |------|--------|-------------|-----------| | Primitive | Stack (value directly) | Value | Value (independent) | | Reference | Heap (pointer to data) | Reference | Reference (shared) |

Test Yourself

Before moving on, make sure you can answer:

  • What are the 7 primitive types in JavaScript?
  • Why does {} === {} return false?
  • What happens when you pass an array to a function and modify it inside?
  • What's the difference between shallow and deep copying?
  • How would you check if two arrays have the same contents (not the same reference)?

Related Topics

  • Immutability — Understanding reference types is key to understanding why immutability matters in frameworks like React
  • Memory Management & Garbage Collection — Reference types live on the heap and are garbage collected when no references point to them
  • Type Coercion — Primitive types have specific coercion rules that behave differently from objects
  • Spread Operator & Object.assign — Tools for creating copies, but beware of shallow vs deep
  • const Keyword — const prevents reassignment of the variable, not mutation of the object it points to

Go Deeper