JavaScript

Mutable and Immutable Data in JavaScript

The term mutability means changeable, the concept of mutability can be applied only to objects and to 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 data 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 employee and assigned it some properties, in the second line another object was created named employee2 and we assigned it employee which means the employee2 would have the same properties as employee. Then we create another employee and we assign it some different properties. Next, we checked whether “employee2” has the same properties as “employee” or not.

Output of 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 modify the previous example, for instance, change the employee1 name from “Joe Clarke” to “Dean Elgar”, and 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 affect 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 variable shows same output:

Now change the value of “employee2” and observe, will it change the value of “employee1” or the value for the first variable will remain the same:

var employee1= 'Daniel';

var employee2= employee1;

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

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

var employee2 = 'Bryn';

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

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

We assign ‘Bryn’ to the second variable:

Now, observe the output:

The example clarifies that when we changed the value of employee2, we observed that changing the name of the second variable doesn’t affect the value of the first variable which means JavaScript treats both of them as separate variables, and it actually reassigns the value to the second variable.

We will consider another example to figure out the immutable data in JavaScript.

var str = "hello";

console.log("original string : ", str);

str.toUpperCase();

console.log("string after toUpperCase method : ", str);

We took a string variable and assigned it a value “hello” then we used a string method “toUpper”. Upon running the program we observed that it didn’t change the string because in JavaScript strings are immutable data types and they can’t be modified after creation.

The output of above-given code will be:

You can noticed that toUpperCase doesn’t change the lower case letters to the upper case letters because we can’t modify the immutable data after its creation.

Conclusion

Mutable data can be modified at any point while immutable data contradicts with the mutable data which means the mutable things can’t be changed. In this post, we explained the difference between primitive data types with reference types. Then we understand 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.