JavaScript

Mutable and Immutable data in JavaScript

The term mutability means changeable; the concept of mutability can be applied only to objects and arrays in JavaScript. Mutability’s concept can’t be applied to primitive data such as string, boolean, number, etc. While immutable data refers to primitive data whose state can’t be changed. In this post, we will understand the difference between mutable data and immutable data with the help of some examples.

Before heading towards mutable or immutable data, initially, we need to clarify the concept of storing data in JavaScript variables. The variables in JavaScript are capable of storing two types of values either primitive type or reference type.

Total seven primitive data types are available in JavaScript while there are three reference data types. The main difference between them is, in primitive data type the memory is allocated in the stack while in reference data type the memory is allocated in the heap. So, in short, the primitive data type is the base data type while the reference data type is the object made up of several features and these objects are passed as a reference.

Mutable data in JavaScript

Mutable objects can be modified or revised after their creation but must remember, an object may have two references, and it’s also possible that there are two objects with the same properties. So, multiple references for one object and two objects with similar characteristics are two different things.

Implementation of mutable data in JavaScript

Let’s consider an example to understand the mutability in JavaScript.

let employee1 = { name: "Joe Clarke", age: 35, id: 123, city: 'London' };

let employee2 = employee1;

let employee3 = { name: "Joe Denly", age: 25, id: 121, city: 'Birmingham'};

console.log("check Whether employee1=employee2", employee1===employee2);

console.log("check Whether employee1=employee3", employee1===employee3);

We created an object named “employee1” and assigned it some properties, in the second line we created a variable “employee2” and assigned it the variable “employee1” which means the “employee2” would have the same properties as the “employee1”.

Afterwards, we create another variable with the name of “employee3” and we assign it some different properties.

Lastly, we checked whether “employee2” and “employee3” has the same properties as “employee1” or not.

Output of the above code will be:

Now, let’s see what happens if we change the value of “employee1”, will it affect the properties of “employee2”?

Let’s modify our code:

let employee1 = { name: "Joe Clarke", age: 35, id: 123, city: 'London' };

let employee2 = employee1;

employee1.name = "Dean Elgar";

console.log("updated values of employee1 : ", employee1);

console.log("updated values of employee2 : ", employee2);

Let’s check whether it affects the name property of employee2 or not.

The output for our modified code will be:

From the above-given output, we can see that changes that we make in the property of “employee1” has affected the value of “employee2” as well. This happens because “employee2” was created with the reference of “employee1”.

Immutable data in JavaScript

Immutability refers to the primitive values like string, or number, etc and in JavaScript, we can’t modify them but we can reassign them with some new values.

Implementation of immutable data in JavaScript

The below-given example will help you to understand the immutable data types.

var employee1= 'Daniel';

var employee2= employee1;

console.log("name of first employee : ", employee1);

console.log("name of second employee : ", employee2);

We created a variable and assigned a value to it. Then we created another variable and assigned it the first variable as highlighted in the below-given screenshot.

Now let’s examine the output, you will see both variables show the same output:

Now change the value of “employee1” and observe, will it change the value of “employee2” as well or remain the same:

var employee1= 'Daniel';

var employee2= employee1;

console.log("name of first employee : ", employee1);

console.log("name of second employee : ", employee2);

var employee1 = 'Bryn';

console.log("updated name of 1st employee : ", employee1);

console.log("updated name of 2nd employee : ", employee2);

Now, observe the output:

The example clarifies that when we change the value of employee1, it doesn’t affect the value of the second variable which means JavaScript treats both of them as separate variables.

Conclusion

Mutable data can be modified at any point while immutable data contradicts with the mutable data as it can’t be changed. In this post, we explained the difference between primitive data types and reference types. Then we understood the idea of mutable and immutable data, for this purpose we took some examples and implemented them in JavaScript. Finally, we can conclude that if we change a value of the reference variable it will mutate the original value as well, but the primitive variable doesn’t mutate.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.