JavaScript Pass by Value and Pass by Reference — Simplified
Based upon Datatype, JavaScript passes a value of a variable using two ways:
- Using Pass by Value
- Using Pass by Reference
Pass by Value
When you pass primitive data types (such as numbers, strings, or booleans) to a function, a copy of the actual value is passed. Changes made to that variable inside the function do not affect the original variable outside the function. These values are like locked boxes — you can’t change what’s inside. If you modify the value inside a function, it won’t change the original value outside the function because you’re working with a separate copy.
In simple terms, Pass by Value is like making a photocopy of a document: changing the copy doesn’t affect the original document.
function modifyValue(x) {
x = 10;
}
let num = 5;
modifyValue(num);
console.log(num); // Output: 5In the example above, the value num remains unchanged because it's a primitive type.
Pass by Reference
When you pass an object (like an array or custom object) to a function, a reference to that object is sent to the function. Changes made inside the function affect the original object outside the function.
When you work with non-primitive types like objects or arrays, they are passed in a way that they share the same underlying data. Imagine it like two people holding a balloon. If one person changes the balloon’s colour, the other person sees the change because they both have a grip on the same balloon. Similarly, if you modify an object or array inside a function, those changes are reflected outside the function because they both refer to the same object or array in memory.
function modifyObject(obj) {
obj.prop = "new value";
}
let myObject = { prop: "old value" };
modifyObject(myObject);
console.log(myObject.prop); // Output: "new value"In this case, the object myObject is passed by reference, so changes made to its property prop inside the function are reflected in the original object.
Sounds too complicated? Read the Simplified Versions
- Pass by Value & Pass by Reference — Simplified
- JavaScript Code Execution — Simplified
- React Element — Simplified
Read more about React & JavaScript
- Understanding Callbacks in JavaScript
- Call Stack in JavaScript
- What is React
- Datatypes in JavaScript
- Variables in JavaScript
- Scope in JavaScript
- Hoisting in JavaScript
- Working of JavaScript
