Pass by value and Pass by reference in JS

In this article, we'll look at what is pass by value and pass by reference in JS.

Before starting this, In javascript has 5 types that are passed by value: boolean, null, undefined, String, and Number.

// Primitives
const number= 10;
const bool = false;
const str = 'Hello!';
const tempVarOne = null;
const tempVarTwo = undefined;

Whereas javascript has 3 types that are passed by reference: Array, functions, and Object.

// Objects
const obj= {
  a: 10
};
const array = [1, 5, 6];
const testFunction= (num1, num2) => {
  return num1+ num2;
};

What is Pass by Value?

In JS pass-by-value takes place when we assign primitive values to variables. Passing by value means every time we assign value to any variable it will create a new copy of that value. So we have two independent variables.

let a = 10;
let b = a;

b = b + 10;

console.log(a); // 10
console.log(b); // 20

Explanation: On line 1 let a = 10;declares variable "a" with value 10. On line 2 let b = a; declares second variable "b" and initialize it with value of variable "a". Later, b = b + 10; adds 10 to variable "b" and it becomes 20. And change in value of variable "b" doesn't affect the value of variable "a".

What is Pass by reference?

In JS, when we do assign an object to a variable it will assign it's reference to that variable and not the value.

let obj1 = { key: "foo" };
let obj2 = obj1;
console.log(obj1);  // { key: "foo" }
console.log(obj2);  // { key: "foo" }

obj2.key = "bar";
console.log(obj1);  // { key: "bar" }
console.log(obj2);  // { key: "bar" }

Explanation: On line 1 let obj1 = { key: "foo" };declares object obj1. On line 2 let obj2 = obj1; we assign "obj1" reference to "obj2", so both variables will now point to the same object. Later, obj2.key = "bar"; we change values of "obj2" which will get reflected in "obj1" as well both are sharing the same reference.

Comparing values VS Comparing references :

It's important to understand the difference between values and references for comparing objects.

const num = 1;
const numCopy = num;
const numCopy2 = 1;

console.log(num === numCopy); // true
console.log(numCopy === 1); // true
console.log(numCopy === numCopy2 ); // true

num, numCopy & numCopy2 have same value i.e 1 . The === operator evaluates it as true as long both operands have the same value.

But working of === operator changes in the case of references. Check example:

let obj1 = {key: "foo"};
let obj2 = {key: "foo"};

console.log(obj1=== obj2); // false

let obj3 = obj1;
console.log(obj1=== obj3);  // true

obj1, obj12 have the same structure but they have different references, so If we compare these objects, it will return false. But if we assign the same object to any other variable it will not store its value instead of that it will have the reference.
If we have the same reference thus === operator will return true

Also as we share the same reference across two varibles. so if we made some changes in the second variable it will get reflected in the first variable.

let obj1 = {key: "foo"};
console.log(obj1); //{key: "foo"}

let obj2 = obj1;
obj2.key = "bar";
console.log(obj1); //{key: "bar"}