How Object Reference Assignment Differs from Primitive Assignment in JavaScript

Object reference assignment copies the memory address (reference) rather than the actual value, while primitive assignment creates an independent copy of the value itself.

In JavaScript, understanding how values are stored and transferred is fundamental to writing bug-free code. According to the lydiahallie/javascript-questions repository, the language handles primitive values and objects through fundamentally different assignment mechanisms that affect everything from variable updates to equality comparisons.

The Fundamental Difference: Value vs Reference

JavaScript categorizes data into two distinct groups that determine how assignment behaves.

Primitive values include string, number, boolean, null, undefined, symbol, and bigint. These are immutable and stored directly in the variable's memory location.

Objects include plain objects, arrays, functions, and other complex data structures. These are stored in the heap, and variables hold references (memory addresses) pointing to these locations rather than the data itself.

How Assignment Works in JavaScript

Primitive Assignment (Value Copy)

When you assign a primitive value to a new variable, JavaScript copies the actual value to a new memory location. The two variables remain completely independent.

let a = 10;          // a holds the value 10
let b = a;           // b receives a copy of the value 10
b = 20;              // changing b does NOT affect a

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

Object Reference Assignment (Reference Copy)

When you assign an object to a new variable, JavaScript copies only the reference (the memory address). Both variables point to the same underlying object in memory.

let obj1 = { name: 'Lydia' }; // obj1 points to an object in heap memory
let obj2 = obj1;               // obj2 gets a copy of the reference
obj2.name = 'Sarah';           // mutate the object through obj2

console.log(obj1.name); // 'Sarah' – obj1 sees the change
console.log(obj2.name); // 'Sarah' – because both reference the same object

Equality Comparison: Strict Equality Operator Behavior

The difference between value and reference semantics becomes critical when using the strict equality operator (===).

As documented in README.md at line 610 of the lydiahallie/javascript-questions repository: "primitives are compared by their value, while objects are compared by their reference."

// Primitive equality: compared by value
let num1 = 5;
let num2 = 5;
console.log(num1 === num2); // true – same primitive value

// Object equality: compared by reference
let arr1 = [1, 2];
let arr2 = [1, 2];
console.log(arr1 === arr2); // false – different objects (different references)

let arr3 = arr1;
console.log(arr1 === arr3); // true – same reference

Why Understanding Reference vs Primitive Matters

Side Effects: Mutating an object through one reference affects every other variable pointing to that object. This can lead to unintended bugs when functions modify passed objects.

Performance: Copying large objects by value would be computationally expensive. JavaScript optimizes this by copying only references (typically 8 bytes) rather than entire object structures.

Function Arguments: When passing arguments to functions, primitives are passed by value (the function gets a copy), while objects are passed by reference (the function gets the pointer, allowing mutation of the original).

Summary

• Primitive assignment copies the actual value, creating independent variables that do not affect each other when modified.
• Object reference assignment copies the memory address, causing multiple variables to point to the same underlying object.
• Strict equality (===) compares primitives by value and objects by reference, as documented in the README.md of the lydiahallie/javascript-questions repository.
• Understanding these semantics prevents bugs related to unintended mutations and explains why identical-looking objects fail equality checks.

Frequently Asked Questions

Does JavaScript pass objects by reference or by value?

JavaScript passes object references by value. This means the function receives a copy of the reference (the memory address), not the object itself. While you cannot replace the original object reference from within the function (reassigning the parameter only changes the local copy of the reference), you can mutate the object's properties because the reference points to the same memory location.

Why do two identical arrays fail strict equality check?

Two arrays containing the same elements fail the strict equality check (===) because JavaScript compares objects by reference, not by content. When you create two separate array literals, JavaScript allocates two distinct memory locations. Even if both arrays contain identical values, they are separate objects in memory, causing the equality comparison to return false.

How do I create a true copy of an object instead of a reference?

To create a true copy rather than a reference, use structured cloning or serialization methods. For shallow copies, use Object.assign({}, obj) or the spread syntax {...obj}. For deep copies of JSON-serializable data, use JSON.parse(JSON.stringify(obj)). For complex objects containing functions or circular references, use the native structuredClone() method available in modern environments, which creates a deep copy without the limitations of JSON serialization.

Are functions and arrays treated as objects in JavaScript?

Yes, functions and arrays are treated as objects in JavaScript. Arrays are specialized objects with numeric indices and a length property, while functions are callable objects. Both follow object reference semantics: assigning a function or array to a new variable copies the reference, not the value. They are compared by reference using strict equality, and mutations made through one reference are visible through all references to that function or array.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}