Pass by Reference vs Pass by Value in JavaScript

When we pass data to a function in JavaScript, we either pass it by value or by reference. The difference between these two is important to understand when working with variables, functions, and objects.

What is Pass by Value?

In pass by value, a copy of the variable’s value is passed to the function. This means that changes made inside the function do not affect the original variable outside the function. Primitive data types (like numbers, strings, booleans) are passed by value.

let a = 5;

function changeValue(x) {
    x = 10;
    console.log("Inside function:", x); // Output: 10
}

changeValue(a);
console.log("Outside function:", a); // Output: 5

When we pass a into the changeValue function, the value 5 is copied to x. Changing x inside the function does not affect the original value of a because they are two separate copies.

What is Pass by Reference?

In pass by reference, the reference (or address) of the variable is passed to the function, meaning that changes made inside the function will affect the original variable. Non-primitive data types (like objects and arrays) are passed by reference.

let obj = { name: "Satyendra" };

function changeName(object) {
    object.name = "John";
    console.log("Inside function:", object.name); // Output: John
}

changeName(obj);
console.log("Outside function:", obj.name); // Output: John

Here, obj is passed by reference, meaning that both the original obj and the object inside the function point to the same memory location. So, when we change the name property inside the function, it also changes the original object outside the function.

Pass by Value vs Pass by Reference in Action

let numbers = [1, 2, 3];

function changeArray(arr) {
    arr = [4, 5, 6]; // Trying to replace the whole array
    console.log("Inside function:", arr); // Output: [4, 5, 6]
}

changeArray(numbers);
console.log("Outside function:", numbers); // Output: [1, 2, 3]

Here, we tried to replace the entire array inside the function, but since arrays are passed by reference, the new assignment to arr only affects the local variable arr inside the function, not the original array.

let numbers = [1, 2, 3];

function modifyArray(arr) {
    arr[0] = 10; // Modifying the first element
    console.log("Inside function:", arr); // Output: [10, 2, 3]
}

modifyArray(numbers);
console.log("Outside function:", numbers); // Output: [10, 2, 3]

Here, we modified the elements of the array, which does change the original array since arrays are passed by reference.

Key Differences

Pass by Value: Primitive data types like strings, numbers, booleans. Changes inside a function do not affect the original variable.

Pass by Reference: Non-primitive data types like objects, arrays. Changes inside a function affect the original variable.

Summary

Primitive types (e.g., strings, numbers, booleans) are passed by value, meaning a copy is passed to functions.

Non-primitive types (e.g., objects, arrays) are passed by reference, meaning changes made inside the function affect the original object or array.

Understanding the difference is key to avoiding unintended changes when working with objects or arrays in JavaScript.