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

📌 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.