DEV Community

keshav Sandhu
keshav Sandhu

Posted on

JavaScript Object References – Explained with Examples

Lets start

πŸ”Ή 1. Objects Are Passed by Reference

In JavaScript, objects (including arrays and functions) are assigned and passed by reference, not by value.

js
const a = { name: "Alice" };
const b = a;

b.name = "Bob";

console.log(a.name); // ➜ "Bob"

βœ… a and b both point to the same object in memory.


πŸ”Ή 2. Primitive Values Are Passed by Value

js
let x = 10;
let y = x;

y++;

console.log(x); // 10
console.log(y); // 11

βœ… x and y are completely separate.


πŸ”Ή 3. Object Comparison Checks Reference, Not Structure

js
const obj1 = { a: 1 };
const obj2 = { a: 1 };

console.log(obj1 === obj2); // false

Even though they look identical, they're two different objects in memory.

βœ… To compare deeply:

js
JSON.stringify(obj1) === JSON.stringify(obj2); // true

Or use a deep equality library like lodash.isEqual.


πŸ”Ή 4. Mutating vs Copying Objects

❌ Mutating Original:

js
const user = { name: "Alice" };
function update(user) {
user.name = "Bob";
}
update(user);
console.log(user.name); // Bob

βœ… Copying (Shallow):

js
const original = { a: 1 };
const copy = { ...original };

copy.a = 2;

console.log(original.a); // 1

... or Object.assign() creates a shallow copy - only top-level is copied.


πŸ”Ή 5. Shallow vs Deep Copy

js
const obj = { a: 1, b: { c: 2 } };

const shallowCopy = { ...obj };
shallowCopy.b.c = 99;

console.log(obj.b.c); // 99 ❌ (still affected!)

βœ… Deep Copy (one way):

js
const deepCopy = JSON.parse(JSON.stringify(obj));

This has limitations (won’t work with functions, Dates, undefined, circular refs).


πŸ”Ή 6. Object Mutation in Arrays

js
const users = [{ name: "Alice" }];
const newUsers = users;

newUsers[0].name = "Bob";

console.log(users[0].name); // "Bob" ❗

users and newUsers point to the same array and same object inside it.


πŸ”Ή 7. Object Identity in State (React relevance)

In React:

js
const [state, setState] = useState({ count: 0 });

setState({ count: 0 }); // Will re-render (new object reference)

React compares by reference, not deep equality.

Even if content is same, new object β†’ re-render βœ…
But if reference is same, no re-render (optimization)


πŸ”Ή 8. Freezing an Object (Make it Immutable)

js
const obj = Object.freeze({ a: 1 });
obj.a = 99; // ❌ won't change

console.log(obj.a); // 1

  • Works only on top-level (not deeply)
  • Good for read-only configs

πŸ”Ή 9. References Inside Functions

js
function mutate(obj) {
obj.changed = true;
}
const data = {};
mutate(data);

console.log(data.changed); // true

βœ… Passing an object to a function allows mutating it from inside.


πŸ”Ή 10. Comparing Arrays and Functions by Reference

js
const a = [1, 2];
const b = [1, 2];
console.log(a === b); // false

const f1 = () => {};
const f2 = () => {};
console.log(f1 === f2); // false

Even if they look identical, they are different objects/functions in memory.


🧠 Summary – Key Concepts

Concept Reference Behavior
Objects Reference
Arrays Reference
Functions Reference
Primitives (string, number) Value
Comparison (===) Compares references
Spread/assign Shallow copy
JSON methods Deep copy (with limits)

Top comments (1)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Javascript does not use pass by reference at all - everything is passed by value. It does however, have reference types where the 'value' is a reference to the data. 'Pass by reference' is not the same thing... in languages that use pass by reference, you can reassign the variable when it is passed - as you are making the reference point to something new. This is not possible in JS