JavaScript - Immutability

---

---

Immutable means that something that cannot be changed. In programming, immutable means a value that cannot be changed once set.

Most programs require the generation, modification, and deletion of data. So, why would anyone want to deal with immutable data?

In this tutorial, we will look at the immutability of primitives, arrays, and objects using JavaScript examples.

Concept of Immutability

Immutability is a simple but powerful concept. In simple terms, something that cannot be modified is an immutable value. We can come across situations when we need to create a new object in our code with a new attribute or value while maintaining the existing value, particularly when creating our apps. The idea of immutability allows us to create new objects without changing the original value.

JavaScript has two types: primitive and reference. Primitive types consist of numbers, strings, booleans, null, and undefined. Reference types are objects, arrays, and functions.

The difference between the two is that primitive types are immutable (unchangeable), whereas reference types are mutable (changeable). For example, a string is immutable:

let userAge = "22";
let userNewAge = userAge;
userAge = "24";

We simply generated two variables and used userAge to the userNewAge variable. But when we modify the value of userAge, you will realize that both remain the same.

console.log(userAge === userNewAge); // false

Why use Immutability?

Here are some reasons that shows you should use immutability in Javascript −

• Predictability: When the data does not change it is easy to understand how your software works.

• Prevent bugs: Immutable data can help prevent unexpected changes that can cause program errors.

• Simple to Share: As immutable data never changes so it is better to distribute it throughout your applications.

Examples of Immutability

Below are some example to show the immutability in JavaScript −

Example 1

Here is the first example using strings as you may know strings in JavaScript are immutable. When you change a string so you create a new one.

// Create a string here
let greeting = "Hello, world!";

// This will not change the original string.
greeting[0] = "h"; 

console.log(greeting); 

Output

In this example we are trying to change the first letter of the greeting from "H" to "h." But strings cannot be edited in this way. The original string remains the same.

Hello, world!

Example 2

Now we will talk about the second example, in which we will use arrays and you may know arrays are mutable but we can create a new array instead of changing the existing one with the help of the spread operator in Javascript.

// create an array
let numbers = [1, 2, 3];

// Create a new array with an extra number.
let newNumbers = [...numbers, 4]; 

console.log(numbers); 
console.log(newNumbers); 

Output

In the above example we started with an array of numbers instead of changing the numbers we created a new array called newNumbers and insert a new number. Check the below output −

[1, 2, 3]
[1, 2, 3, 4]

Example

Objects are also mutable but we can create a new object instead of changing the existing one.

let person = { name: "Amit", age: 25 };

// Create a new object with an updated age.
let updatedPerson = { ...person, age: 26 }; 

console.log(person); 
console.log(updatedPerson);

Output

This will generate the below result −

{ name: "Amit", age: 25 }
{ name: "Amit", age: 26 }

Importance of Immutability

There are several reasons why immutability is so important to our everyday code.

• Once set, an immutable value cannot be changed. Instead, a fresh value is created. So the value remains consistent and dependable throughout the code. As a result, it makes state management across the program easier. Plus immutability is a core principle of state management frameworks like Redux.

• Code becomes easier to read and less prone to errors when data structures are not changed quickly. This helps with troubleshooting and maintenance.

• Immutability encourages less side effects and more predictable code, which aligns with the ideas of functional programming.