Is JavaScript a pass-by-reference or pass-by-value language?

Front End Technology Javascript Object Oriented Programming

JavaScript provides us with functions, that are a collection of pre-defined instructions or statements that are only carried out when we call the function that contains this code. The function accepts one or more arguments as input and output. You can pass values or references for the input arguments.

All function parameters are always given by value in JavaScript. It indicates that JavaScript inserts copies of variable values into function parameters.

The passing variables outside of the function are not affected by any modifications you make to the function's internal arguments. Or, to put it another way, changes made to the parameters do not affect the behaviour of the function outside of it.

When variables are supplied into a function by reference, any modifications made outside of the function will be replicated in the variables you pass in. JavaScript is unable to support this.

Pass By Value

Pass by value refers to the method of calling functions by simply supplying the value of the variable as an argument. Therefore, any modifications done inside the function have no impact on the starting value.

When passing by value, each argument's parameter makes a copy of itself. As a result, all modifications made within the function are made to the cloned value rather than the original value.

Example 1

In this example let us understand, By passing the variable's value directly as a parameter, a function that accepts pass by value calls is invoked.


<!DOCTYPE html>
<html>
<title>Is JavaScript a pass-by-reference or pass-by-value language - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      function passValue(y, z) {
         let subst;
         subst = z;
         z = y;
         y = subst;
         document.write(`This code is in the
         function -> y = ${y} z = ${z}` +'<br>');
      }
      let y = 6;
      let z = 12;
      document.write(`This code before calling the
      Function -> y = ${y} z = ${z}` +'<br>');
      passValue(y, z);
      document.write(`This code after calling the
      Function -> y =${y} z = ${z}`);
   </script>
</body>
</html>

Pass by Reference

Pass by Reference calls a function by passing the reference or address of the variable right away as an argument. Therefore, altering the value within the function also modifies the starting value. array and object pass by reference properties are used in JavaScript.

Pass by reference means that parameters supplied as arguments relate to the original value rather than making their own copies, which means that modifications done inside the function have an impact on the original value.

Example 2

Let's look at an example to better understand how a function that accepts a variable's address or reference can be called.


<!DOCTYPE html>
<html>
<title>Is JavaScript a pass-by-reference or pass-by-value language - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      function passReference(object) {
         let subst = object.y;
         object.y = object.z;
         object.z = subst;
         document.write(`This code is in the
         Function -> y = ${object.y} z = ${object.z}` +'<br>');
      }
      let object = {
         y: 15,
         z: 30
      }
      document.write(`This code before calling the
      Function -> y = ${object.y} z = ${object.z}` +'<br>');
      passReference(object)
      document.write(`This code after calling the
      Function -> y = ${object.y} z = ${object.z}`);
   </script>
</body>
</html>

Example 3

Let's use this example to see how to update an object reference in a function.

We are changing the original value when using pass by reference. The object value is unaffected when we give an object as an argument and change its reference in the context of the function. However, changing an object internally will have an impact on it.


function passReference(object) {
   object = {
      x: 15,
      y: 30,
      z: "Tutorialspoint"
   }
   console.log(`This code is in the Function -> object `);
   console.log(object);
}
let object = {
   x: 15,
   y: 30
}
console.log(`object reference is getting update -> `)
console.log(`This code before calling the Function -> object`);
console.log(object);
passReference(object)
console.log(`This code after calling the
Function -> object`);
console.log(object);

The above code will give the below output: (Click F12 and you will see the result in console tab)

In Brief

In this article, we first looked at what pass by value and pass by reference are, and then explained both concepts using an example.

Passing values into a function can be done either by value or by reference. Pass by value is used with primitive data types like as string, number, and boolean, and each time a variable is passed to a function, a copy of that variable is made and modified as part of the pass by value process. Pass by reference is used with object data types like as functions, arrays, and plain objects; however, because pass by reference doesn't make a copy of the original value, the original value is updated.