Post
Ask Question

Understand JavaScript Callback Functions and Call by Value and Call by Reference

Introduction

 
This article explains callback functions, call by value, and call by reference in JavaScript. A callback function, also known as a higher-order function, is a function that is passed to another function (let's call this other function “otherFunction”) as a parameter, and the callback function is called (executed) inside the other function. A callback function is essentially a pattern (an established solution to a common problem) and therefore, the use of a callback function is also known as a callback pattern.
 
Example
 
Let's look at the following example. In this example, we will try to implement one simple callback function. We know that in JavaScript a function is a type of object and we can send a function as a function argument. Here is one example:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>     
  6.      <script>  
  7.         function abc() {  
  8.             console.log("Its a callback function");  
  9.         }  
  10.         function xyz(callback) {  
  11.             callback();  
  12.         }  
  13.         xyz(abc);  
  14.     </script>  
  15. </body>  
  16. </html>  
 
Now let's pass an argument to the callback function. We can check it's typed before calling the callback function and we are passing a name and surname parameter to the callback function.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <script>  
  7.         function print(name, surname) {  
  8.             console.log("Name:- " + name + "Surname:-" + surname);  
  9.         }  
  10.         function collect(name, surname, callback) {  
  11.             if (typeof callback === "function")  
  12.                 callback(name, surname);  
  13.         }  
  14.         collect('sagar', 'pulidindi', print);  
  15.     </script>  
  16. </body>  
  17. </html>  
 
Now to understand the concept of call by value and call by reference in JavaScript.
 

Call by value

 
In a call by value method, the called function creates a new set of variables and copies the values of the arguments into them.
 
In other words, whatever value we pass to the function will be copied and the function will act on the copy. So the original value doesn't change. 
 
Example
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <form id="form1" runat="server">  
  7.         <script>  
  8.             function samplefun(value) {  
  9.                 valuevalue = value + 200;  
  10.                 console.log("New Value:-" + value);  
  11.             }  
  12.             var value = 200;  
  13.             samplefun(value);  
  14.             console.log('Outsideof function:- ' + value);  
  15.         </script>  
  16.     </form>  
  17. </body>  
  18. </html>  
 
Outside of the function, we are declaring a variable and then sending the variable to the samplefun() function. Then within the samplefun() function the new copy is being created and the reason is, if we change something within the samplefun() function then it does not affect the original variable defined outside of the function. Here is the sample output.
 

Call by reference

 
In a call by reference method, instead of passing a value to the function a reference/pointer to the original variable is passed.
 
In other words, whatever value we pass to the function, it will act on the same value and if it modifies that value, the value will be changed for the entire context.
 
Example
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <form id="form1" runat="server">  
  7.         <script>  
  8.             function samplefun(oil) {  
  9.                 oil.type = 'Olive';  
  10.                 console.log("Oil Type:- " + oil.type);  
  11.             }  
  12.             var oil = {  
  13.                 name: 'Sunflower',  
  14.                 type: 'oils'  
  15.             }  
  16.             samplefun(oil);  
  17.             console.log('Outsideof function:- ' + oil.type);  
  18.         </script>  
  19.     </form>  
  20. </body>  
  21. </html>  
 
To send the reference, we first need to create the object. The object creation in JavaScript is very simple and we have created an oil object with two properties called “name” and “type”. When we are passing the actual object as a function parameter, we are passing the reference of this object. Then we are modifying the property value within the function and automatically it's affecting the original object that we declared outside of the function.
 

Summary

 
In this article, we learned about callback functions and call by value or call by reference in JavaScript. In a future article, we will learn more basic concepts of JavaScript.


Similar Articles