JavaScript: Primitive vs. Reference Types

One of the most critical foundational questions in frontend technical screens is:

What is the difference between Primitive and Reference types in JavaScript? How are they stored in memory?

Many junior developers know that primitives are simple values and objects are references. However, interviewers want to see you explain the mechanical details:

• Storage Location: How stack memory differs from heap memory.
• Copy Behavior: What happens when you assign a variable to another variable.
• Comparison Rules: How variables are compared for equality.
• Mutation side effects: How modifying an object affects other variables pointing to it.

Let's dissect JavaScript's memory models from first principles.

1. Stack vs. Heap Memory

JavaScript separates data types into two categories based on how they are stored in the memory engine:

• Primitive Types: Stored directly in the Stack. The stack is a fast, structured memory space with fixed limits. Primitives are stored directly as the value itself.
• Reference Types: Stored in the Heap. The heap is a large, unstructured memory pool for dynamic data. Variables in the stack store a reference (pointer) containing the memory address of the object in the heap.

Stack Memory (Fast, Fixed)          Heap Memory (Dynamic, Dynamic Size)
┌───────────────────────────┐        ┌──────────────────────────────────┐
│ age: 25                   │        │                                  │
│ name: "John"              │        │                                  │
│                           │        │  { id: 1, name: "Sarah" }        │
│ userRef: 0x7FFF58B2 ──────┼───────►│  [ Pointer Target ]               │
└───────────────────────────┘        └──────────────────────────────────┘

2. The Core Primitives

JavaScript has 7 primitive types:

• String
• Number
• Boolean
• Null
• Undefined
• Symbol
• BigInt

Copy by Value Behavior

When you assign a primitive variable to another, the value is copied. They become completely independent variables.

let nameA = "John";
let nameB = nameA; // Value is copied
 
nameB = "Sarah";
 
console.log(nameA); // "John" (Unchanged)
console.log(nameB); // "Sarah"

3. Reference Types

Reference types (also called Objects) represent collections of properties. These include:

• Object ({})
• Array ([])
• Function
• Date & RegExp

Copy by Reference Behavior

When you assign a reference type to a new variable, you copy the memory reference (address), not the actual object. Both variables point to the exact same object in the heap.

let userA = { name: "John" };
let userB = userA; // Reference is copied
 
userB.name = "Sarah"; // Mutating the object in the heap
 
console.log(userA.name); // "Sarah" (Mutated!)
console.log(userB.name); // "Sarah"

4. Sizing Copy Methods: Shallow vs. Deep Copy

Because referencing shares pointers, copying objects requires explicit cloning methods:

A. Shallow Copy

Copies the outer object structure, but nested objects are still copied by reference.

• Syntax: Object.assign({}, obj) or Spread operator { ...obj }

const original = { name: "John", details: { age: 30 } };
const copy = { ...original };
 
copy.name = "Sarah";
copy.details.age = 35; // Mutates nested object inside the heap!
 
console.log(original.name);        // "John" (Outer is copied)
console.log(original.details.age); // 35 (Nested is mutated!)

B. Deep Copy

Creates a completely independent copy of all levels of nested objects.

• Syntax: structuredClone(obj) (Modern standard) or JSON.parse(JSON.stringify(obj)) (Legacy fallback)

const original = { name: "John", details: { age: 30 } };
const copy = structuredClone(original);
 
copy.details.age = 35;
 
console.log(original.details.age); // 30 (Independent!)
console.log(copy.details.age);     // 35

Senior-Level Interview Answer

JavaScript separates data into primitive types and reference types based on storage mechanics. Primitive types are stored directly in stack memory by value, meaning copy actions duplicate the actual value. Reference types, such as objects and arrays, reside in heap memory, and their variables in the stack store pointers pointing to their heap address. Consequently, assigning an object to another variable simply copies the reference, meaning mutations propagate to all variables pointing to that heap location. To replicate objects independently, developers must choose between a shallow copy (using spreads or Object.assign) or a deep copy (using structuredClone) depending on the complexity of nested properties.

Common Interview Mistakes

❌ Attempting to deep copy using the spread operator { ...obj }

The spread operator only duplicates the top-level keys. If your object contains nested arrays or child objects, they will still share memory locations with the copy.

❌ Comparing two objects using == or ===

Object comparisons in JavaScript compare references, not properties. Two objects with identical values will return false if they reside in different memory locations.

const objA = { val: 1 };
const objB = { val: 1 };
console.log(objA === objB); // false (different addresses)

Key Takeaways

• Primitive Stack: Primitives are stored in the stack; their values are immutable and copied directly on assignment.
• Reference Heap: Objects and arrays are stored in the heap; variables hold references to these addresses.
• Copy Side-effects: Copying a reference type duplicates the pointer, leading to mutations affecting all linked variables.
• Shallow Copy Limits: Spread operations copy only the top layer of properties, preserving child object references.
• Deep Copy Solution: Use structuredClone() to perform complete deep copies of nested object structures.