Introduction to JavaScript Pass By Value
One of the most confusing and interesting features in programming is to differentiate whether a variable is passed by Value or passed by Reference. But in JavaScript, we need not struggle as the only pass by Value concept is used. JavaScript Pass by Value is the function being called by the directly passing value of a variable as arguments. In other words, Change of arguments inside function won’t affect variables that are being passed from outside of the function. JavaScript being Object-Oriented which means most of the parts of JavaScript are Objects. So here comes the concept of Data Types too, Primitive and Complex data types will also play a role in JavaScript Pass by Value.
Syntax:
function functionName(arg1) {
// code of the function
}
// call to the function
functionName(arg2);So here, functionName is the function which has its arguments, after the function definition, we call the functionName using another argument, which will automatically replace the defined argument.
JavaScript will copy the value of variables that we pass to a function as local variables. Any change we make to local variables inside function won’t affect the argument which is passed.
We have 2 data types, Primitive ( Immutable data types )and Complex data types.
- Primitive Data Types: Number, String, Boolean, undefined and NULL
- Complex Data Types: Objects, function or array, etc
So here comes the interesting part is, Only Primitive types can be Passed by Value but not Complex types, which can be passed by reference only. Technically, Pass by Reference is present in JavaScript. When variables hold an object, an array of a function which is complex types passes by Reference comes into picture where variable holds the reference or address of the object.
For now, we need not consider passing by Reference concept and get deeper into Pass by Value concept.
Examples to Implement JavaScript Pass By Value
Below are the examples mentioned :
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var employeeName1 = "Jack";
var employeeName2 = employeeName1;
employeeName1 = "Jane";
document.write(employeeName1 + "</br>");
document.write(employeeName2);
</script>
</body>
</html>Output:
Here, it’s a straightforward result, we are using only = operator here to display pass by value concept.
- employeeName1 is created with value ‘Jack’. JS allocates some part of memory here.
- Another variable employeeName2 is created and a copy of employeeName1 is passed to it.
- Both employeeName1 and employeeName2 are independent and have their own memory space allocated.
- Now, employeeName2 also has the value ‘Jack’. employeeName1 is changed to ‘Jane’ but employeeName2 will still hold the original value i.e ‘Jack’ as both the memory allocations are different and hence the output.
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<script>
let x = 10;
let samplechange = (value) => {
value = 20
}
samplechange(x);
document.write(x);
</script>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title>Pass by Value</title>
</head>
<body>
<h2>Pass by Value in JavaScript</h2>
<script>
var y = 30;
function sum(x) {
x = x + x;
}
sum(y);
document.write(y);
</script>
</body>
</html>Output:
Let me explain How Pass by Value works with the above example,
- We define a sum() function which accepts argument x, function changes the value of x to 2 times of x
- On top of the function, we have declared and initialized a variable y with value 30
- After body of the function, we pass the y variable to function sum(). Here when y is passed to function sum(), JavaScript will copy the value of y to x variable.
- On sum(y), the value of x will change according to functionality written, which is x + x, so y x value will be 60 now
- But y value won’t change because x and y are both different variables.
- So on logging the output of x value will be 60 and y value will be the same 30.
- If the value was passed with reference, y value will change to 60.
Example #4
Before callByValue, Inside function and after callByValue change in the value of variables
Code:
<!DOCTYPE html>
<html>
<head>
<title>Pass by Value</title>
</head>
<body>
<h2>Pass by Value in JavaScript</h2>
<script>
function callValue(var1, var2) {
document.write("Inside Call by Value Method");
var1 = "Chaitanya";
var2 = "CPG";
document.write(" var1 = " + var1 +" var2 = " +var2 + "</br>");
}
let var1 = "Karthick";
let var2 = "IBM";
document.write("Before Call by Value Method");
document.write(" var1 = " + var1 +" var2 = " +var2 + "</br>");
callValue(var1, var2)
document.write("After Call by Value Method");
document.write(" var1 = " + var1 +" var2 = " +var2 + "</br>");
</script>
</body>
</html>Output:
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
<title>Pass by Value</title>
</head>
<body>
<h2>Pass by Value in JavaScript</h2>
<script>
let var1 = 100;
function updateValue(var1){
var1 = var1 * 4;
document.write("Updated Value is: ", var1 + "</br>");
}
updateValue(var1);
document.write("Original Value is: ", var1);
</script>
</body>
</html>Output:
Advantages of Pass By Value
Below are the advantages :
- Multiple values can be returned from a function
- Comparatively, execution is faster as there is no copy of the argument made.
- To avoid the changes if done unknowingly, using const reference and passing it would help us to undo the changes
- Pass by Value is memory safe and efficient
- Value of the arguments which are passed to function won’t change
Conclusion
We have seen how this feature works in JavaScript considering Primitive and Complex data types. Illustrated with few examples which will help you to explore further and also had a look into advantages of pass by Value. Given a brief explanation of the examples will leave you with a good knowledge of how to pass by Value is used. You people can even explore Pass by Reference in JavaScript which is for complex data types.