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 (2)
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
I see, thanks for the insights.