What is the difference between Pass by Value and Pass by Reference in JavaScript?

JavaScript is a programming language that gives our web applications and web pages the ability to think and act by making it interactive and dynamic. Like any other programming language, JavaScript offers us functions which are a set of defined commands or statements that are executed only when we call the function that has this code. The function takes an input or some arguments and returns the output. The input arguments can be passed by value or reference.

So, in this post, we’ll define the terms “pass by value” and “pass by reference” along with examples in JavaScript, as well as explain the differences between the two.

What is pass-by-value?

A function is called directly by sending the value of the variable as an argument if that function is pass-by-value. As a result, any changes made within the function have no impact on the initial or original value. The original value isn’t changed because when we pass the variable into a function as an argument, the copy of that variable is created and hence any changes or operations performed inside that function are done on the copy variable rather than the original one.

Pass by value Example

Let us create a function with the name of passByValue and change the values of the variables a and b that are passed as arguments in this function. Outside the function, we initialize the a and b variables and give them 1 and 2 values respectively. Then we console log these values.

function passByValue(a, b) {

    a=3;

    b=4;

    console.log("Inside the function")

    console.log("a: ",a, " b: ",b); // 3, 4

}

 
let a = 1;

let b = 2;

console.log("Outside Function. Before calling function");

console.log("a: ",a, " b: ",b); // 1,2

 
passByValue(a, b);

 
console.log("Outside Function. After calling function");

console.log("a: ",a, " b: ",b); // 1,2

We will see that when we console log the values of a and b outside the function it will say 1 and 2. However, inside the function, the values will be 3 and 4 and again after calling this function the values won’t change as inside the function copies were made of a and b and changes were made to those copies.

What is pass-by-reference?

A function is called by supplying the variable’s reference/address as a parameter in pass-by reference. As a result, modifying the value within the function also modifies the value outside the function that is the original value. The pass-by-reference feature is used in JavaScript arrays and objects.

Pass by Reference Example

Let us initialize an object and give two properties to it. One property defines the name of the machine and the other “isOn” which lets us know whether the machine is on or not. We also initialize a function with the name of passByReference and change the value of the computer object properties like name and isOn. We then console log these properties before and after calling the function:

function passByReference(machine) {

    machine.name="Computer";

    machine.isOn = true;

}


var computer = {

    name: "myComputer",

    isOn: false

};

console.log("Before calling function");

console.log(computer.isOn); // true;

console.log(computer.name); // Computer


passByReference(computer);


console.log("After calling function");

console.log(computer.isOn); // true;

console.log(computer.name); // Computer

We can see that copies weren’t made in the function and the original properties of the computer object were changed, hence it is passed by reference.

Difference Between pass by value and pass by reference

The major difference between pass by value and pass by reference is that pass by reference comes into play when we assign primitives and pass by value comes into play when we assign objects. Primitive data types include string numbers, boolean, symbols, and values like null and undefined, and the object data types include functions, arrays, and simple objects.

The second major difference between the two is that pass-by-value creates a copy and then changes are made to that copy; however in pass-by-reference no copy is made and modification is done on the original variable.

Conclusion

We can pass values into a function via pass by value or pass by reference. Pass by value is done on the primitive data types like string, number, boolean, and every time you pass a variable to a function, it creates a copy of that variable and then modifies that copy in a pass by value. Pass by reference is done on the object data type like functions, arrays, and plain objects, and in the pass by reference, the original value is modified as pass by reference doesn’t create a copy.

In this post, first, we saw what pass by value is and pass by reference is and explained both the phenomena with the help of an example and then continued our discussion by answering the question of what is the difference between pass by value and pass by reference in JavaScript.

from https://ift.tt/3bCZdQX