Immutability

Immutability​

In the functional programming, this not a good practice to change the data e.g if the array we want to update the value of array and blow example we show that we have change the original array and update the value on the index 1.

Mutation (dangerous!)

let cities = ["Delhi", "Bombay", "Bangalore"];
cities[1] = "Mumbai";
cities; // ["Delhi", "Mumbai", "Bangalore"]

In blow example you see that we have return the new array rather then change the original array and that is a good practice.

No mutation (safer!)

const oldCities = ["Delhi", "Bombay", "Bangalore"];

const newCities = oldCities.map((city) => {
  if (city === "Bombay") return "Mumbai";
  if (city === "Bangalore") return "Bengaluru";
  return city;
});

newCities; //["Delhi", "Mumbai", "Bengaluru"]
oldCities; //["Delhi", "Bombay", "Bangalore"]

But the question is that what if we have large size of array, and we can return new array that can full our memory?

So there is a solution to this in the functional programming world which is special types of data structures that are designed to be immutable,but also efficient.And these are called immutable data structures, or sometimes persistent data structures.

Immutable Data Structures​

• Immutable Data Structure Use something called structural sharing.
• Immutable data structures allow us to represent our data in a kind of tree like structure.
• So that we can reuse unchanged parts of the tree while changing the parts that we wanna update.

Example

Let's say I have some array called Zoo with a bunch of Zoo animals,little emojis and I want to update that.

I want to instead of my little bunny rabbit here at index 1,I wanna have an alien, I'm getting a really exotic alien animal in my Zoo.Instead of mutating that in place, which again, could mess up, I don't know.

Maybe my Zoo keeper colleague over there is not expecting extra terrestrial animals and their code only works with terrestrial animals maybe.

So instead of changing that in place, what I can do is take my original Zoo array, break it up into this tree like structure,where now instead of an array, I've got kind of a tree of all my data.

And now what I can do is copy only the nodes of the tree that I need to change to replace that value at index 1.

So before I had my array represented with these little notes, a little pairs of buddies of animals, which are then joined by these kind of intermediary nodes.

And then finally I get sort of a root node that I can point to in my Zoo variable so that I can unite all of those animals.

What I'm going to do is keep all of the nodes that I don't need to change and create new a new node for any new values that I need.So in this case, I'm copying a little two item array,which is way better than copying an eight item array.

And then add some intermediate nodes that link that that newnode up with the old ones that I have not changed.

So what I've got here, is this yellow part of the tree here,gets to be shared by both versions.So what happens, is that I get to create new copies of my array,which is now a tree under the hood without copying everything in the array.

Library​

• Immutable.js
• Immer

Exercise​

• Exercise: Avoiding mutation
• Solution: Avoiding mutation