Pass by Value and Pass by Reference in Javascript
Last Updated :
16 Sep, 2024
JavaScript handles variables in different ways when passing them to functions. This is one fundamental concept that every JavaScript developer needs to understand is how variables are passed to functions. This is where “Pass by Value” and “Pass by Reference” come into play. We will break down these concepts in simple terms with easy-to-follow examples
What is “Pass by Value” in JavaScript?
Pass by Value means that when you pass a variable to a function, JavaScript creates a copy of the variable’s value and uses it inside the function. This means any changes made to the variable inside the function do not affect the original variable outside the function.
Example: In this example, we have shown a pass-by value.
JavaScript
function Passbyvalue(a, b) {
let tmp;
tmp = b;
b = a;
a = tmp;
console.log(`Inside Pass by value
function -> a = ${a} b = ${b}`);
}
let a = 1;
let b = 2;
console.log(`Before calling Pass by value
Function -> a = ${a} b = ${b}`);
Passbyvalue(a, b);
console.log(`After calling Pass by value
Function -> a =${a} b = ${b}`);
OutputBefore calling Pass by value
Function -> a = 1 b = 2
Inside Pass by value
function -> a = 2 b = 1
After calling Pass by value
Function -> a =1 b = 2 What is “Pass by Reference” in JavaScript?
Pass by Reference means that when you pass a variable (specifically, objects or arrays) to a function, JavaScript passes the reference or memory address of the variable, not a copy. This means any changes made to the variable inside the function will affect the original variable outside the function.
Example: In this example we have shown pass by reference.
JavaScript
function PassbyReference(obj) {
let tmp = obj.a;
obj.a = obj.b;
obj.b = tmp;
console.log(`Inside Pass By Reference
Function -> a = ${obj.a} b = ${obj.b}`);
}
let obj = {
a: 10,
b: 20
}
console.log(`Before calling Pass By Reference
Function -> a = ${obj.a} b = ${obj.b}`);
PassbyReference(obj)
console.log(`After calling Pass By Reference
Function -> a = ${obj.a} b = ${obj.b}`);
OutputBefore calling Pass By Reference
Function -> a = 10 b = 20
Inside Pass By Reference
Function -> a = 20 b = 10
After calling Pass By Reference
Function -> a = 20 b = 10 Important Details About Pass by Reference
When working with objects or arrays, if you reassign the reference inside the function, it does not affect the original variable. However, modifying the contents (like adding or changing properties) will affect the original.
Example 1: Updating the object reference in the function.
JavaScript
function PassbyReference(obj) {
// Changing the reference of the object
obj = {
a: 10,
b: 20,
c: "GEEKSFORGEEKS"
}
console.log(`Inside Pass by
Reference Function -> obj `);
console.log(obj);
}
let obj = {
a: 10,
b: 20
}
console.log(`Updating the object reference -> `)
console.log(`Before calling Pass By
Reference Function -> obj`);
console.log(obj);
PassbyReference(obj)
console.log(`After calling Pass By
Reference Function -> obj`);
console.log(obj);
OutputUpdating the object reference ->
Before calling Pass By
Reference Function -> obj
{ a: 10, b: 20 }
Inside Pass by
Reference Function -> obj
{ a: 10, b: 20, c: 'GEEKSFORGEEKS' }
Aft...
Example 2: Mutating the original Object.
JavaScript
function PassbyReference(obj) {
// Mutating the original object
obj.c = "GEEKSFORGEEKS";
console.log(`Inside Pass by
Reference Function -> obj `);
console.log(obj);
}
let obj = {
a: 10,
b: 20
}
console.log(`Mutating the original object -> `)
console.log(`Before calling Pass By
Reference Function -> obj`);
console.log(obj);
PassbyReference(obj)
console.log(`After calling Pass By
Reference Function -> obj`);
console.log(obj);
OutputMutating the original object ->
Before calling Pass By
Reference Function -> obj
{ a: 10, b: 20 }
Inside Pass by
Reference Function -> obj
{ a: 10, b: 20, c: 'GEEKSFORGEEKS' }
After ...
Understanding the difference between “Pass by Value” and “Pass by Reference” is crucial for effectively managing variables and data in JavaScript. It helps you predict how changes inside functions will affect your data, which is important for debugging and optimizing your code.