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>
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.
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.
Jaganathan BantheswaranPosted Nov 24, 2013, 9:25 AM
There is no "pass by reference" available in JavaScript. You can pass an object (which is to say, you can pass-by-value a reference to an object) and then have a function modify the object contents. i.e however you are doing in this project
Sourav KayalPosted Nov 22, 2013, 8:58 PM
Sir, Thanks for your valuable remark.
Sam HobbsPosted Nov 22, 2013, 11:25 AM
You deserve credit for all your efforts to explain things to others. You do that well. But please understand that the terms by value and by reference did not originate in C and Cpp; the terms were created for other languages that do not have pointer types. Attempting to use the terms for C can easily cause confusion.
Sam HobbsPosted Nov 22, 2013, 11:17 AM
Since you say that in "C and Cpp we use the address of ("&") operator" you should also say that Cpp has reference types, including Reference-Type Function Arguments. In C# we might say "ref int" and the equivalent in Cpp would be "int &". A reference in Cpp is not the same as a pointer in C and Cpp. See: http://msdn.microsoft.com/en-us/library/w7049scy(v=vs.110).aspx