Pass by Value in JavaScript | Pass by Reference

In JavaScript, there are two ways to pass arguments to the function: pass by value and pass by reference. They are also known as call by value and call by reference.

When we pass arguments to the function by value, first, JavaScript makes the copy of argument’s value. Thereafter, it passes to the called function.

After coping values, JavaScript assigns values to the corresponding parameters of primitive data types.

Primitive data types in JavaScript are strings, numbers, boolean values, undefined, and null. Primitive values are immutable and pass to function by value.

With pass by value (which means pass by copy), changes to the copy of called function do not affect original value of variable in the calling function.

That is, any change made to the value of parameter will affect only the value of variable within the function. But, they do not affect the value of external variable (from the outer scope), which we used to pass to the function.

Let’s create a JavaScript program that will demonstrate arguments passed by value.

Program code 1:

<script>
  function num(number1, number2)
  {
   number1++;
   number2++;
   document.write("number1 = " +number1, "<br>");
   document.write("number2 = " +number2, "<br>");
  }
  let number1 = 20;
  let number2 = 40;
  num(number1, number2); // Passing arguments.
  document.write("Original number1 = " +number1, "<br>");
  document.write("Original number2 = " +number2);
</script>

Output:
     number1 = 21
     number2 = 41
     Original number1 = 20
     Original number2 = 40

As you can observe in this program and output, parameters of the function have the same names as variables have used to pass arguments.
[adinserter block=”5″]
Even though we have changed the values of variables inside the function, the values of original variables remain the same. Look at the output to understand clearly.

Pass By Reference in JavaScript

In JavaScript, objects are mutable data. When we assign an object to a variable, that variable holds a reference to the object, not the object itself.

When we pass an object as an argument to a function, you are passing the object reference, not the object itself. So, we can say that objects are passed by reference.

It means that any changes to that object inside the function will also change the value outside of the function. In other words, if a function changes an object’s property, it also changes the original value.

Let’s take an example program based on objects pass by reference concepts.

Program code 2:

<script>
   let name = {firstName: "Deepak"};
   document.write("Original name: " +name.firstName, "<br>");
   function update(n)
   {
      n.firstName = "Ivaan"; // modifying property of an object.
// Checking both references are pointing to the same object.
     document.write("Are both pointing to the same object: " +(n == name), "<br>");
     document.write("Update name: " +n.firstName, "<br>");
   }
  update(person); // Calling function.
  document.write("Original name after update = " +name.firstName);
</script>

Output:
     Original name: Deepak
     Are both pointing to the same object: true
     Update name: Ivaan
     Original name after update = Ivaan

Explanation:

As you can observe in the program and output, we have updated the property of an object inside the function, then there have also changed in the property of original object.

So, any change we make in the property of an object inside the function will still be there when the function completes.

When we are calling the function by passing the variable person, we are passing the reference to the object. Here, person is a reference variable that is pointing to the object.

The reference variable person contains the address of an object. The parameter n in the function gets the copy of the person reference (i.e. address of object). That’s why both reference variables person and n are pointing to the same object.

In this tutorial, you learned pass by value and pass by reference in JavaScript with example programs. Hope that you will have understood the basic concepts of pass by value and pass by reference.
Thanks for reading!!!
Next ⇒ Function Return in JavaScript⇐ Prev Next ⇒

Pass By Reference in JavaScript

Related Posts

Trending now