Hey Dev, In today’s article we are going to be looking at an important concept in JavaScript that I did not take seriously until recently and that concept is “Pass by Value and Pass by Reference”.

Let’s dive right into it 😉

Primitive & Non-Primitive Data Types

Before we talk about what pass by value and pass by reference are, We are going to first discuss two categories of data types so that we will have a better understanding of how pass by value and pass by reference work. Those data types are;

Primitive
Non-Primitive

1. Primitive Data types

Data types such as string, number, null, undefined, symbols, and boolean fall under the category of Primitive data types. One important thing to note is that primitive data types are immutable i.e. there is no way to change a primitive value once it gets created. Let’s see an example 👇🏽

let myName = 'Dev lawrence';
myName = 'John Doe';
console.log(myName); //  John Doe

From the example above, you’ll notice that we assigned the string “Dev lawrence” to the variable myName and we reassigned it to a new string “John Doe”.

💡 It’s important to note that a variable that stores a primitive value can be reassigned to a new value but the existing value can’t be changed as shown below.

let myName = 'Dev lawrence';
myName = 'J';
console.log(myName); //Dev lawrence

Lastly, Primitive is compared by value. That is, Two values are strictly equal if they have the same value. Let’s see an example 👇🏽

let myName = 'Dev lawrence';
let myName2 = 'Dev lawrence';

console.log(myName == myName2); // true
console.log(myName === myName2); // true

2. Non-Primitive Data types

Non-primitive data types include objects, arrays, and functions. Unlike primitive data types, Non-primitives are mutable i.e. the value of an object can be changed after it gets created. Let’s see an example 👇🏽

let myNames = ['Dev', 'lawrence'];
myNames[1] = 'james';

console.log(myNames); // ['Dev', 'james']

As you can see from the example above we modified the array with the variable myNames.

In non-primitive data types, arrays or objects are not compared by value, they are compared by reference.

For example, if two objects or variables have the same value, they are not strictly equal. The same goes for objects with key-value pairs. Even if they have the same elements that are in the same order, they are not strictly equal. Let’s see an example 👇🏽

let myName = ['Dev', 'lawrence'];
let myName2 = ['Dev', 'lawrence'];

console.log(myName == myName2); // false
console.log(myName === myName2); // false

💡 The fundamental difference between primitives and non-primitive is that primitives are immutable and non-primitives are mutable.

Now that we understand the difference between Primitive and Non-primitive data types. Let’s see what Pass by Value and Pass by reference are;

What is Pass by Value?

Pass by Value involves setting variables to primitives data types. This means that every time you assign a value to a variable, a copy of that value is created. Every single time.

And if you are still having trouble trying to wrap your head around it just put it at the back of your mind that all primitive values in JavaScript are passed by value. Let’s take an example 👇🏽

let a = 1;
let b = a;
b = b + 4;
console.log(a); // 1
console.log(b); // 5

From the example above, we created two variables a and b

Variable a is initialized with the number 1.

Variable b is initialized with the value of a variable (which is passing by value). That is, a copy of the number 1 is assigned to b.

Moving on, b = b + 4 increases by 4 and becomes 5. b variable changes and this change doesn't affect the value of a.

What is Pass by Reference?

Unlike Pass by value, Pass by reference does not create a new space in the memory, instead, we pass the reference/address of the actual parameter, which means the function can access the original value of the variable.

In pass by reference, you are essentially storing the value inside a memory address.

When creating an array or object you're given a reference to that array or object. If two variables hold the same reference, then changing the object reflects in both variables. Let’s see an example 👇🏽

let a = [1];
let b = a;
b.push(2);
console.log(a); // [1, 2]
console.log(b); // [1, 2]

From the example above, Here is a breakdown of what is going on;

The first line let a = [1] creates an array, defines a variable a, and initializes the variable with a reference to the created array.

Then the second line let b = a defines a variable b, and initializes b with the reference stored in a variable. This is a pass by reference.

b.push(2) mutates the array by pushing an item 2. Because a and b variables reference the same array, this change is reflected in both variables.

Conclusion

That’s all guys 🎉🎉. All you really need to know from the entire article is that Primitives values are passed by values and non primitive values are passed by reference which can be modified.

I really hope you enjoyed reading this article. You can leave your comments or contributions down below. See you next time 😀

Dev Lawrence