Introduction

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, we will learn the concept of "Call by Value and Call by Reference" in this article. Though this is not at all a new concept, and if you are familiar with the C family of languages, you will most probably have learned this concept at the beginning of your programming days. Correct..? Let's learn this concept in JavaScript.

Call by Value in JavaScript

Call by Value is when we want to pass any parameter as a function argument; then, there are two types of arguments. An idea is passed when the function 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 a formal argument  
Function testFunction(name ){  
}  
//the string(Sourav) is an 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. Then outside of the function, we print the value of the old variable, and we see that the value within the function has been changed. However, it is not reflected outside of the function.

When we send data to the function, a new copy of the same variable is created within the calling function, and the modification is happening to this local variable; it's not affecting the original variable. This is an example of a Call by Value in JavaScript.

Call by Reference in JavaScript

In this section, we will understand the concept of "Call by Reference". The theory is that when we want to implement a Call by Reference, we need to send the object's reference. In C and C++, we use the address of the ("&") operator, and in C#, 'ref' sends the address of a variable. In JavaScript, the situation is a bit different. We need to send the actual object as a function argument to send an object's reference. 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. Both are the same, and the object creation part differs slightly.

<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 cases, 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 the object's value (real property). We see that that actual object is affected. So, in an actual scenario, we are not sending a copy of an object but an actual object as its reference.

Conclusion

I hope you have understood the concept. Though this is a tiny article and nothing new in the concept, the JavaScript developer might love this one. Enjoy JavaScript.