JavaScript — Pass by Reference and Pass by Value (Made Simple)

#webdev #programming #javascript #beginners

If you ever changed one variable and somehow another one also changed —
and sometimes it didn’t — then welcome.
You just met one of JavaScript’s most common confusions for beginners that is:
Pass by Value and Pass by Reference.

Let’s understand both of them clearly with small examples.

🔹 Primitive Types → Pass by Value

Primitive types in JavaScript are —
string, number, boolean, bigint, null, and undefined.

These are simple. When you assign or pass them,
JavaScript makes a copy of the actual value and allocates separate memory pointing to a new address.
That means changing one variable will never change the other.

let a = 12;
let b = a;

b = 13;

console.log(b, a); // 13, 12

👉 a and b are two different boxes.
They just happen to start with the same value.
Changing one box doesn’t touch the other.
So we can clearly say that —

Primitive = always copied by value

Now let’s discuss about Non-Primitive types.

🔹 Non-Primitives → Pass by Reference (kind of)

Now this is where confusion starts.
Objects, arrays, and functions don’t hold the real value.
They hold a reference (memory address) where the value is stored.

So when you assign one object or array to another variable,
the variable is not copying the data — it is copying the address.

That’s why when you change one, the other also changes.

🔸 Example 1 — Mutation Affects Both

const a = [1, 2, 3, 4, 5];
const b = a;

b.pop();

console.log(b, a); 
// both will print the same - [1, 2, 3, 4]

Here, both a and b point to the same array in memory.
When you remove one element from b,
you are actually removing it from that same array.
So both show the same result.

🧩 Changing (mutating) means both get affected.

But here’s the catch — Reassignment Does NOT Affect the Original.
What does it mean? Well, let’s see the example first.

🔸 Example 2 —

const x = [1, 2, 4, 5];
let y = x;

y = [12, 34, 45];

console.log(x, y);
// [1, 2, 4, 5] [12, 34, 45]

Here we did a reassignment of the y variable.
Mutation and reassignment are not the same thing — let’s understand it.

At the start, x and y were pointing to the same array.
But when we reassigned y = [12, 34, 45],
we didn’t edit that same array — we created a new one.
Now y points to a new address, and x is still pointing to the old one.

And here, reassignment breaks the connection — that’s why y is now referenced to this new array.
The same principle works with functions too.

So, a quick recap and for remembrance:

If we mutate, both variables change.
If we reassign, only your local variable changes.

JavaScript is always pass-by-value,
but for objects, the value that gets copied is the reference.

So when you pass an object and change its properties,
the change is visible outside because both share the same reference.
But when you reassign, you’re just pointing to a new memory address,