Pass by Value and Pass by Reference in Javascript
Last Updated : 15 Apr, 2025
JavaScript handles variables in different ways when passing them to functions. Variables in JavaScript can either be passed by value or passed by reference, depending on the type of data they hold.
"Pass by Value" in JavaScript
When a variable is passed by value, a copy of the actual value is passed to the function. Any changes made to the parameter inside the function do not affect the original variable.
In JavaScript, primitive data types are passed by value. These include:
JavaScript let n = 10; function modify(x) { x = 20; console.log("Inside function: ", x); } modify(n); console.log("Outside function: ", n); OutputInside function: 20 Outside function: 10
In this example
- The value of
n (10) is copied to x. - Modifying
x inside the function does not affect n because x is a separate copy.
"Pass by Reference" in JavaScript
When a variable is passed by reference, a reference to the actual data is passed. This means changes made to the parameter inside the function affect the original variable.
In JavaScript, non-primitive data types (such as objects and arrays) are passed by reference.
JavaScript let obj = { name: "Ravi" }; function modify(o) { o.name = "Arun"; console.log("Inside function: ", o.name); } modify(obj); console.log("Outside function: ", obj.name); OutputInside function: Arun Outside function: Arun
In this example the obj reference is passed to the function, allowing changes to the original object.
Difference between Pass by Value and Pass by Reference
| Feature | Pass by Value | Pass by Reference |
|---|
| Applies To | Primitive data types | Non-primitive data types (objects, arrays) |
| Data Copy | Creates a copy of the actual value | Passes a reference to the original data |
| Effect of Changes | Changes inside the function do not affect the original variable | Changes inside the function affect the original variable |
| Use Cases | Numbers, strings, booleans, etc. | Arrays, objects, functions |
Important Clarification: Does JavaScript Truly Support "Pass by Reference"?
JavaScript does not have "true pass by reference." Instead:
- Primitive types (like numbers, strings, booleans) are always passed by value—a copy of the value is passed.
- For objects and arrays, JavaScript passes the reference value, which is essentially a pointer to the memory location of the data. This allows modifications to the object or array but does not allow reassigning the original variable within the function.
JavaScript let obj = { name: "Ravi" }; function reassignReference(o) { // Reassigning the reference o = { name: "Arun" }; console.log("Inside function: ", o.name); } reassignReference(obj); console.log("Outside function: ", obj.name); OutputInside function: Arun Outside function: Ravi
In this example
- The function receives a reference to the original object.
- However, reassigning o creates a new object, leaving the original object untouched.
Thus, JavaScript passes reference values for objects but not "by reference" as in languages like C++.
Common Pitfalls
1. Unexpected Side Effects
When working with objects or arrays, be cautious of unintended changes to the original data.
JavaScript let config = { theme: "dark" }; function updateTheme(c) { c.theme = "light"; } updateTheme(config); console.log(config.theme); 2. Cloning to Avoid Reference Issues
To avoid modifying the original object, create a shallow or deep copy.
Shallow Copy
JavaScript let original = { name: "Ravi" }; let copy = { ...original }; copy.name = "Arun"; console.log(original.name); Deep Copy
JavaScript let original = { name: "Ravi", details: { age: 25 } }; let deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.details.age = 30; console.log(original.details.age); Similar Reads
Primitive and Reference value in JavaScript In JavaScript, a variable may store two types of values, Primitive values or Reference values. This article will describe and help to compare both these types of values. Primitive value: JavaScript provides six types of primitive values that include Number, String, Boolean, Undefined, Symbol, and Bi
2 min read
Reference and Copy Variables in JavaScript In this article, we will talk about pass-by-value and pass-by-reference in JavaScript. JavaScript always passes by value, but in an array or object, the value is a reference to it, so you can 'change' the data. JavaScript has 5 primitive data types that are passed by value, they are Boolean, NULL, u
5 min read
Call by Value Vs Call by Reference in JavaScript Call by Value: In this method, values of actual parameters are copied to the function’s formal parameters, and the two types of parameters are stored in different memory locations. So any changes made inside functions are not reflected in the actual parameters of the caller. Suppose there is a varia
3 min read
Set the Value of an Input Field in JavaScript We will learn how you can set the value of an input field in JavaScript. We will set user input to the placeholder value of the input field using JavaScript.Below are the approaches to set the value of an input field in JavaScript:Table of ContentBy using the innerHTML propertyBy using setAttribute
2 min read
Global and Local variables in JavaScript In JavaScript, understanding the difference between global and local variables is important for writing clean, maintainable, and error-free code. Variables can be declared with different scopes, affecting where and how they can be accessed. Global VariablesGlobal variables in JavaScript are those de
4 min read