Pass by Value vs. Pass by Reference in JavaScript – Simple Explanation

In JavaScript, when you pass variables to a function, they are passed in two different ways:

1️⃣ Pass by Value – A copy of the variable is passed.

2️⃣ Pass by Reference – The original memory address is passed.

---

📜 Pass by Value (Like Making a Photocopy)

What Happens?

• When you pass primitive data types (like numbers, strings, booleans) to a function, a copy of the value is made.
• The original value remains unchanged because the function only works on the copy.

Example 1: Numbers (Pass by Value)

function updateValue(x) {
    x = 100; // Changing the copied value
    console.log("Inside function:", x); // 100
}

let num = 50;
updateValue(num);
console.log("Outside function:", num); // 50 (original remains unchanged)

🔹 Real-Life Example (Photocopy Analogy)

• Imagine you have a document.
• You make a photocopy and give it to your friend.
• Your friend writes on the photocopy, but your original document remains the same.

---

📜 Pass by Reference (Like Handing Over the Original Document)

What Happens?

• When you pass objects or arrays, JavaScript passes a reference to the actual memory location, not a copy.
• The function can directly modify the original object.

Example 2: Objects (Pass by Reference)

function updatePerson(person) {
    person.name = "Alice"; // Changing the original object
}

let personObj = { name: "John" };
updatePerson(personObj);
console.log(personObj.name); // "Alice" (Original object modified)

🔹 Real-Life Example (Original Document Analogy)

• You have a document, and instead of making a photocopy, you give the original to your friend.
• Your friend writes on it, and when they return it, your original document is changed.

---

🚀 Key Differences

Concept	Data Types Affected	What Happens?	Changes Affect the Original?
Pass by Value	Number, String, Boolean, Null, Undefined	A copy is passed to the function	❌ No
Pass by Reference	Object, Array, Function	A reference (memory address) is passed	✅ Yes

---

📌 Example 3: Arrays (Also Pass by Reference)

function modifyArray(arr) {
    arr.push(4); // Modifies the original array
}

let numbers = [1, 2, 3];
modifyArray(numbers);
console.log(numbers); // [1, 2, 3, 4] (Original array is changed)

💡 Even though arrays look like primitive data types, they are objects in JavaScript, so they are passed by reference!

---

❗ Important Notes

• Primitive types (numbers, strings, booleans, etc.) are pass by value, so changes inside functions don’t affect the original.
• Objects and arrays are pass by reference, so changes inside functions affect the original.
• If you want to avoid modifying the original object, you can create a copy using the spread operator (...) or Object.assign().

function safeUpdate(obj) {
    let newObj = { ...obj }; // Creates a new copy
    newObj.name = "Alice";
    return newObj;
}

let person = { name: "John" };
let updatedPerson = safeUpdate(person);
console.log(person.name); // "John" (Original is safe)
console.log(updatedPerson.name); // "Alice" (Only the copy is changed)

---

🎯 Final Summary

✅ Pass by Value = A copy is passed (original stays the same).

✅ Pass by Reference = A reference (memory location) is passed (original is modified).

✅ Objects & Arrays are always passed by reference, unless explicitly cloned.

Comments

[Jon Randy 🎖️]

JavaScript ONLY uses pass by value. It doesn't use pass by reference. If it did, you'd be able to reassign values to variables passed to functions.

It does, however, have reference types - whose value is a reference to the data stored. This is not the same thing as pass by reference, and these reference types are still passed by value.

developer.mozilla.org/en-US/docs/W...