Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Is JavaScript a pass-by-reference or pass-by-value language?
JavaScript provides functions that contain a collection of instructions executed when called. These functions can accept arguments as input, and understanding how JavaScript passes these arguments is crucial for effective programming.
JavaScript uses pass by value for all function parameters. This means JavaScript creates copies of variable values when passing them to functions. However, the behavior differs between primitive types and objects due to how JavaScript handles references.
Pass By Value (Primitives)
For primitive data types (numbers, strings, booleans), JavaScript creates a complete copy of the value. Changes inside the function don't affect the original variable.
Example: Primitive Values
<!DOCTYPE html>
<html>
<head>
<title>Pass by Value Example</title>
</head>
<body>
<script>
function passValue(y, z) {
let temp = z;
z = y;
y = temp;
document.write(`Inside function: y = ${y}, z = ${z}<br>`);
}
let y = 6;
let z = 12;
document.write(`Before function: y = ${y}, z = ${z}<br>`);
passValue(y, z);
document.write(`After function: y = ${y}, z = ${z}<br>`);
</script>
</body>
</html>
Before function: y = 6, z = 12 Inside function: y = 12, z = 6 After function: y = 6, z = 12
Pass By Reference (Objects)
For objects and arrays, JavaScript passes a copy of the reference, not the object itself. This means you can modify the object's properties, but reassigning the parameter doesn't affect the original variable.
Example: Modifying Object Properties
<!DOCTYPE html>
<html>
<head>
<title>Pass by Reference Example</title>
</head>
<body>
<script>
function modifyObject(obj) {
let temp = obj.y;
obj.y = obj.z;
obj.z = temp;
document.write(`Inside function: y = ${obj.y}, z = ${obj.z}<br>`);
}
let object = { y: 15, z: 30 };
document.write(`Before function: y = ${object.y}, z = ${object.z}<br>`);
modifyObject(object);
document.write(`After function: y = ${object.y}, z = ${object.z}<br>`);
</script>
</body>
</html>
Before function: y = 15, z = 30 Inside function: y = 30, z = 15 After function: y = 30, z = 15
Example: Reassigning Object Reference
function reassignObject(obj) {
obj = {
x: 100,
y: 200,
z: "New Object"
};
console.log("Inside function after reassignment:");
console.log(obj);
}
let originalObject = { x: 15, y: 30 };
console.log("Before function call:");
console.log(originalObject);
reassignObject(originalObject);
console.log("After function call:");
console.log(originalObject);
Before function call:
{ x: 15, y: 30 }
Inside function after reassignment:
{ x: 100, y: 200, z: 'New Object' }
After function call:
{ x: 15, y: 30 }
Key Differences
| Data Type | Behavior | Original Value Changed? |
|---|---|---|
| Primitives (number, string, boolean) | Copy of value passed | No |
| Objects/Arrays | Copy of reference passed | Yes, if properties modified |
| Object Reassignment | Only local parameter affected | No |
Conclusion
JavaScript is technically pass-by-value, but objects behave like pass-by-reference because you receive a copy of the reference. Understanding this distinction helps avoid common programming mistakes when working with functions and data manipulation.
598 Views
