In this article we will understand the concept of call by value and call by reference in JavaScript.
Call by value and call by reference in JavaScript
In this JavaScript article we will learn the concept of call
by value and call by reference. We know that the concept of call by value and
call by reference is present most of the programming language and its present
in JavaScript too.
Concept of call by value
When we pass value of a parameter t to function, we call it
call by value, because the value will copy in a new variable which is entirely different
from original one. So, if we change something in copied variable it will not at
all effect to original variable. In the sample code below we have implemented the
concept of cal by value.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function testfun(value) {
value = value + 100;
console.log("New Value:-" + value);
}
var value = 100;
testfun(value);
console.log('Outsideof function:- ' +value);
</script>
</form>
</body>
</html>
Outside of function we are declaring variable and after that
we are sending the variable to testfun() function. Then within testfun()
function the new copy is getting created and this is the reason, if we change
something within testfun() function it does not effect to original variable
which is defined outside of function. Here is the sample output.
Concept of call by reference
In call by reference we send the reference of actual
variable, and if we change something in this reference variable it will effect
to original variable. Here we have implemented one example of call by
reference.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function testfun(wine) {
wine.type = 'Strong Beer';
console.log("Wine Type:- " + wine.type);
}
var wine = {
name: 'Kingfisher',
type:'beer'
}
testfun(wine);
console.log('Outsideof function:- ' +wine.type);
</script>
</form>
</body>
</html>
To send the reference, we have to create object at first.
The object creation in JavaScript is very simple and we have created wine
object with two properties called “name” and “type”. When we are passing actual
object as function parameter, we are passing the reference of this object. Then
we are modifying the property value within function and automatically it’s
effecting to original object which we have declared outside of function.
Conclusion:-
In this example we have learned the concept of call by value
and call by reference in JavaScript. When we want to access one global object
in various functions in JavaScript we can send the reference of this object. Hope
you have understood the concept of call by value and call by reference.