This is the Advanced JavaScript article series. In this article series we are learning various concepts of JavaScript. You can read them here.
As the name suggests, in this article we will learn the concept of "Call by Value and Call by Reference". Though this is not at all a new concept and if you are familiar with the C family of languages then most probably you have learned this concept in the beginning of your programming days. Correct..? Let's learn this concept in JavaScript.
Call by Value in JavaScript
The concept of Call by Value is , when we want to pass any parameter as a function argument then there are two types of arguments. An argument that is passed when the function is called is called an Actual Argument and the argument that takes the value in the caller's function is called a Formal Argument. Here is a sample example.
//Here name is formal argument
Function testFunction(name ){
}
//the string(Sourav) is actual parameter.
testFunction('Sourav');
Now, we will implement the same concept in a real application.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function testFun(name) {
name = name + 'Kayal';
console.log("Modified name:- " + name);
}
var name = 'Sourav'
testFun(name);
console.log("Old Name:- " + name);
</script>
</body>
</html>
![Call by value in JavaScript]()
Within the function we are modifying the Formal Argument value and then outside of the function we are printing the value of the old variable and we are seeing that the value within the function has been changed though it is not reflected outside of the function.
The reason is, when are sending data to the function the new copy of the same variable is being created within the calling function and the modification is happening to this local variable, it's not effecting the original variable. This is the example of Call by Value in JavaScript.
Call by Reference in JavaScript
Now, in this section we will understand the concept of "Call by Reference". The theory is, when we want to implement a Call by Reference, we need to send the reference of the object. In C and C++ we use the address of ("&") operator and in C# 'ref' to send the address of a variable. In JavaScript the situation is a little different. We need to send the actual object as a function argument to send the reference of an object. Try to understand the following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function testFun(person) {
person.name = 'Ajay';
person.surname = 'Joshi';
}
var person = {
name: 'Sourav',
surname:'Kayal'
};
testFun(person);
console.log("Name:- " + person.name);
console.log("Surname:- " + person.surname);
</script>
</body>
</html>
Here is another code for sending an object, basically both are the same and the object creation part is a little different.
<script>
function testFun(person) {
person.name = 'Ajay';
person.surname = 'Joshi';
}
var person = new Object();
person.name = 'Sourav';
person.surname='Kayal'
testFun(person);
console.log("Name:- " + person.name);
console.log("Surname:- " + person.surname);
</script>
In both case the output is the same.
![Call by reference in JavaScript]()
In this example we are sending a "person" object as a function argument and within the function we are modifying a value (read property) of the object and we are seeing that that actual object is affected. So, in an actual scenario, we are not sending a copy of an object, we are sending an actual object as its reference.
Conclusion
Though this is a very small article and nothing new in the concept but the JavaScript developer might love this one. Hope you have understood the concept. Enjoy JavaScript.