Immutability in JavaScript is Fun! Part 1

Immutability is one of the fundamental concepts when we talk about functional Programming. Even if you think you are following it, sometimes you still might be violating it if you don’t have a thorough knowledge of it. This write-up’s purpose is to explain what is Immutability? , why we want to use it, and how to achieve it?

Let’s begin!😃

What is Immutability?

Image Credit: GeeksforGeeks

Immutability is not allowing your data and its structure to change over time. It’s like a fact. Once it’s been defined, it stays the same till the end.

Now, there are various ways through which you can make your data immutable with or without using external libraries. We will see them in a while, but first, Let’s check why do we even want them?

Why do we use it?

Is it a compulsion?
No, it is not compulsory to make your data immutable, you can make all the changes you want in your existing data, but decide on your own is it worth the trouble after learning these benefits-

• It helps to track the changes that happen over time to the objects. Like going from State 1-> State 2 -> State 3-> State 4, you can see and compare these sequences of events.
• Keeps it Simple- Mutation might result in side effects that are hard to explain when you are not sure what happened to the original object over time, whereas Immutation keeps it all simple.
• Predictability- It helps to predict what might happen, it doesn’t produce unnecessary side effects which helps in reason the flow.
• Libraries like react etc., provides a great way to compare two objects and deal with them and perform actions based on them.

Different Data Types in JS

Image Credit: kamprasad

Can we say declaring a const ensures immutability?

The const creates a read-only reference to a variable. It means the variable identifier is immutable, but not the data it holds.

You can always mutate/update the data inside an object-

const MY_VAR = 20;
MY_VAR = 100;
// This will throw the error as reassignment to a constant is not
// allowed
const MY_OBJ = {
prop_1:'val_1',
prop_2:'val_2'
};
MY_OBJ.prop_1 = 50;
// Allowed as the data it has, can be changed.
 

Confused why it was not allowed in the case of a primitive data type and worked for an object?😕

Keep reading!

Immutability of Primitive Data Types

All Primitive Data types are Immutable by default. There is no way to change a primitive value. These are always handled by value, not by reference as to an object.

So, this explains why reassigning a const of primitive value is not allowed to be changed.

Immutability of Arrays

Arrays are Objects, so yes you can easily mutate them the way you want using any array operations. Let’s see how we can make them immutable.

Push and Pop Operations-

// mutable way
const ARR = [1,2,3,4,5];
ARR.push(6); // changes the content of original array
ARR.pop(); // removes the last element from original array
// immutable way
const ARR = [1,2,3,4,5];
const NEW_ARR = [...ARR,6]; // results into a new array 
const NEW_ARR2 = ARR.slice(0,ARR.length-1); // slice array method maintains immutability

Shift and Unshift Operations-

// mutable way
const ARR = [1,2,3,4,5];
ARR.unshift(0); // [0,1,2,3,4,5]
// changes the content of original array
ARR.shift(); // [2,3,4,5]
// removes the first element from original array
// immutable way
const ARR = [1,2,3,4,5];
const NEW_ARR = [0,...ARR]; // [0,1,2,3,4,5]
// results into a new array
const NEW_ARR2 = ARR.slice(1); // [2,3,4,5]
// slice array method maintains immutability

Splice method- It maintains immutability

// mutable way
const ARR = [1,2,3,4,5];
ARR.splice(1,2,8); // [1,8,4,5] 
// removed two elements from index 1 and replaced it with 8, changes the content of original array as splice is a mutable function
// immutable way
const ARR = [1,2,3,4,5];
const NEW_ARR = [...ARR.slice(0,1),8,...ARR.slice(3)]; // [1,8,4,5]
// results into a new array

Sort Method- It is mutable in nature.

// mutable way
const ARR = [3,1,6,4,5];
ARR.sort(); // [1,3,4,5,6] 
// sorts the changes original array 
// immutable way
const ARR = [3,1,6,4,5];
const NEW_ARR = [...ARR].sort(); // [1,3,4,5,6]
// results into a new array

Reverse Function- It is a mutable in nature.

// mutable way
const ARR = [1,2,3,4,5];
ARR.reverse(); // [5,4,3,2,1] 
// reverse the original array
// immutable way
const ARR = [1,2,3,4,5];
const NEW_ARR = [...ARR].reverse(); // [5,4,3,2,1]
// results into a new array

Can functions be Immutable?

Yes, functions can be immutable too. Slice() is immutable in nature.

Reducers (in the context of redux library) enforces immutability through pure functions. Reducers are supposed to be pure functions with no side effects.

Learn more about redux from this source- https://redux.js.org/introduction/getting-started

Interesting!, right?😈

Continue with Part 2

Thank you for reading this article!

This is a vast topic to cover in a single go, hence it’s been divided into two sections. In this section, we learned about different concepts and terms that are used with immutability. We saw how we can have immutability of Arrays and their various functions. Section 2 covers Immutability of Objects in detail.

Now continue on to Part 2! 😄