Pass by Value and Pass by Reference in JavaScript

"Pass by Reference" in JavaScript

Pass by reference means that instead of passing a copy of a variable, JavaScript passes the reference (or memory address) of an object. Changes made inside the function affect the original object.

Example 2: Passing an Object

function modifyObject(obj) {
    obj.value = 20;
    console.log("Inside function:", obj);
}

let data = { value: 5 };
console.log("Before function call:", data);
modifyObject(data);
console.log("After function call:", data);

You can also try this code with Online Javascript Compiler

Run Code

Output:

Before function call: { value: 5 }
Inside function: { value: 20 }
After function call: { value: 20 }

Explanation:

• The object data is passed to modifyObject().
   
• Since objects are passed by reference, changes inside the function modify the original object.

What is Passed by Reference?

• Objects, arrays, and functions in JavaScript are passed by reference.
   
• Changes made to these inside a function reflect on the original variable.

Important Clarification: Does JavaScript Truly Support "Pass by Reference"?

Many developers assume that JavaScript supports true pass by reference, but this is not entirely accurate.

Example 3: Reassigning an Object Inside a Function

function replaceObject(obj) {
    obj = { value: 50 };
    console.log("Inside function:", obj);
}

let data = { value: 5 };
console.log("Before function call:", data);
replaceObject(data);
console.log("After function call:", data);

You can also try this code with Online Javascript Compiler

Run Code

Output:

Before function call: { value: 5 }
Inside function: { value: 50 }
After function call: { value: 5 }

Explanation:

• A new object { value: 50 } is assigned inside the function.
   
• However, this does not affect the original data object.
   
• This proves that objects in JavaScript are not truly passed by reference; instead, a reference to the object is passed by value.

When to Use Pass by Value?  

Pass by value is a concept where a copy of the actual data is passed to a function. This means any changes made to the data inside the function do not affect the original data outside the function. It’s like giving someone a photocopy of a document—they can make changes to the copy, but the original remains untouched.  

In JavaScript, primitive data types (like numbers, strings, booleans, null, & undefined) are always passed by value. For example:  

function updateValue(value) {
    value = 20; // Changing the value inside the function
    console.log("Inside function:", value);
}
let num = 10;
console.log("Before function call:", num); 
updateValue(num);
console.log("After function call:", num); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

20
10
10

In this Code:  

1. We declare a variable `num` with a value of `10`.  
 

2. The `updateValue` function is called, passing `num` as an argument.  
 

3. Inside the function, the parameter `value` is assigned a new value of `20`.  
 

4. However, this change only affects the copy of `num` inside the function. The original `num` outside the function remains unchanged.  

When Should You Use Pass by Value?  

• When you want to work with a copy of the data & ensure the original data remains unchanged.  
   
• When dealing with primitive data types like numbers, strings, or booleans.  
   
• When you want to avoid unintended side effects in your code.  
   

For example, if you’re performing calculations or transformations on a number or string, pass by value ensures the original data stays safe.  

When to Use Pass by Reference?  

Pass by reference is a concept where the memory address of the actual data is passed to a function. This means any changes made to the data inside the function will affect the original data outside the function. It’s like giving someone the original document—they can make changes, and those changes will reflect in the original document.  

In JavaScript, objects (including arrays & functions) are passed by reference. Let’s understand this with an example:  

function updateObject(obj) {
    obj.property = "updated"; // Modifying the object inside the function
    console.log("Inside function:", obj); 
}

let myObj = { property: "original" };
console.log("Before function call:", myObj); 
updateObject(myObj);
console.log("After function call:", myObj);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

{ property: 'updated' }
{ property: 'original' }
{ property: 'updated' }

In this Code:  

1. We declare an object `myObj` with a property `property` set to `"original"`.  
 

2. The `updateObject` function is called, passing `myObj` as an argument.  
 

3. Inside the function, the `property` of the object is updated to `"updated"`.  
 

4. Since objects are passed by reference, the change is reflected in the original `myObj` outside the function.  

When Should You Use Pass by Reference?  

• When you want to modify the original data directly.  
   
• When working with large datasets (like arrays or objects) to avoid creating unnecessary copies, which can save memory.  
   
• When you need to share & synchronize changes across multiple parts of your code.  
   

For example, if you’re updating a user profile object or manipulating an array of data, pass by reference ensures that all changes are reflected in the original data.  

How Does JavaScript Handle Function Parameters?  

JavaScript handles function parameters differently depending on whether the data is a primitive type (like numbers, strings, booleans) or an object (like arrays, objects, functions). Understanding this behavior is key to writing predictable & efficient code.  

Primitive Types: Pass by Value  

When you pass a primitive type to a function, JavaScript creates a copy of the value & passes it to the function. Changes made to the parameter inside the function do not affect the original value.  

Example:  

function modifyPrimitive(value) {
    value = 100; // Changing the value inside the function
    console.log("Inside function:", value); 
}

let num = 50;
console.log("Before function call:", num); 
modifyPrimitive(num);
console.log("After function call:", num); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

100
50
50

Explanation:  

• The variable `num` is passed to the `modifyPrimitive` function.  
   
• Inside the function, `value` is a copy of `num`, so changing `value` does not affect `num`.  

Objects: Pass by Reference  

When you pass an object to a function, JavaScript passes a reference to the object’s memory location. This means changes made to the object inside the function will affect the original object.  

Example:  

function modifyObject(obj) {
    obj.key = "new value"; // Modifying the object inside the function
    console.log("Inside function:", obj); 
}

let myObj = { key: "original value" };
console.log("Before function call:", myObj); 
modifyObject(myObj);
console.log("After function call:", myObj);

You can also try this code with Online Javascript Compiler

Run Code

Output

{ key: 'new value' }
{ key: 'original value' }
{ key: 'new value' }

Explanation:  

• The object `myObj` is passed to the `modifyObject` function.  
   
• Inside the function, `obj` refers to the same memory location as `myObj`, so changes to `obj` affect `myObj`.  

Special Case: Reassigning Object References  

If you reassign the object inside the function, it won’t affect the original object because the reference is lost.  

Example:  

function reassignObject(obj) {
    obj = { key: "reassigned value" }; // Reassigning the object
    console.log("Inside function:", obj);
}

let myObj = { key: "original value" };
console.log("Before function call:", myObj);
reassignObject(myObj);
console.log("After function call:", myObj); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

{ key: 'reassigned value' }

{ key: 'original value' }

{ key: 'original value' }

In this code:  

• Inside the function, `obj` is reassigned to a new object, breaking the reference to `myObj`.  
   
• The original `myObj` remains unchanged. 

Common Pitfalls

Pitfall 1: Modifying an Object Unintentionally

Sometimes, modifying an object inside a function can lead to unintended side effects.

function addElement(arr) {
    arr.push(4);
}

let numbers = [1, 2, 3];
console.log("Before function call:", numbers);
addElement(numbers);
console.log("After function call:", numbers);

You can also try this code with Online Javascript Compiler

Run Code

Output:

Before function call: [1, 2, 3]
After function call: [1, 2, 3, 4]

Solution:

If you want to avoid modifying the original object, create a copy before making changes.

function addElementSafely(arr) {
    let newArr = [...arr];
    newArr.push(4);
    console.log("Inside function:", newArr);
}

let numbers = [1, 2, 3];
console.log("Before function call:", numbers);
addElementSafely(numbers);
console.log("After function call:", numbers);

Pitfall 2: Confusion Between Primitive and Object Types

Many beginners assume that all variables are passed by reference. However, only objects behave this way, while primitives do not.

function modifyVariable(x) {
    x = x + 10;
}

let value = 5;
modifyVariable(value);
console.log(value); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

5 (unchanged)

Pitfall 3: Reassigning Object References Inside Functions

Reassigning an object inside a function does not change the original reference.

function reassign(obj) {
    obj = { value: 100 };
}

let data = { value: 5 };
reassign(data);
console.log(data); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

{ value: 5 }

Frequently Asked Questions

What is the difference between pass by value and pass by reference?

Pass by value: The function gets a copy of the original value (primitives: numbers, strings, booleans). Pass by reference: The function gets a reference to the original object (arrays, objects, functions), so modifications affect the original variable.

How can I avoid modifying the original object when passing it to a function?

You can create a copy using the spread operator ([...] for arrays, {...obj} for objects) before modifying it.

Does JavaScript always use pass by reference for objects?

No. JavaScript passes references by value, meaning you can modify the contents but not reassign the reference itself.

Conclusion

In this article, we learned Pass by Value and Pass by Reference in JavaScript. Primitive data types (e.g., numbers, strings) are passed by value, meaning a copy is created. Objects and arrays are passed by reference, meaning changes affect the original data. Understanding this concept helps developers manage data efficiently and avoid unintended modifications in JavaScript applications.