When we use moderns libraries or frameworks the first important thing is to know how they work and manipulate data, in React, Angular, Svelte and in some cases Vue, we need to manipulate it in an immutable manner.
An immutable code can be explained by something that never changes, a variable cannot be modified after it is created.
The primitive type (or value type) works manipulating their values basicaly doing a copy of our own values, in this way they are immutable by definition (the value never changes, but is replaced by a new one), in this category we have types such as number, string, boolean, symbol (es6), undefined and null.
The immutability of primitive types can be exemplified by:
So, primitives are copied by their values.
Non-primitive types works a little different, the variable is assign to a reference in your declaration and this reference is assign to a value. Non-primitive category have types such as object, function and array.
When we assign a variable with one of these types to another, we pass your reference to the new variable created, therefore when we change its value, the reference won’t be changed, only your value, so we can have a problem with this behavior, because the new variable modify the older by reference, therefore the non-primitive types aren’t immutable.
In this example we will see how this happens:
So, non-primitives are copied by their reference.
Immutable arrays examples
When we are working with arrays functions some of them mutate the original array, they’re:
Using these array features the result can trigger side effects in your code, however we can do all of these features in another way, doesn’t triggering side effects, using an immutable manner.
In the following examples we are going to use the mutate way and after that refactor it, explaining the results and how we can ensure our code will be immutable.
We are going to use a ES6 feature called ‘spread operator’ to manipulate and create immutable arrays in a simple way. In the following examples, we will see mutable and immutable manipulation of arrays.
This method adds the item to the end of the array changing the original array.
This method adds the item to the start of the array changing the original array.
This method removes the last element of the array changing the original array.
This method removes the first element of the array changing the original array.
These methods reorder the items of the array, changing the original array.
Immutable objects examples
To avoid the mutable code, we are going to use a ES6 feature called by ‘spread operator’. That feature allow us to create immutable objects in a simple way. In the following examples we will see mutable and immutable manipulation of objects.
But we need to be careful with nested objects/arrays of the new object, when you modify nested objects of an object copy, also, the reference in mutation won’t be changed in the original object. To resolve this problem we need to pass nested objects with spread as well.
We can work with ‘rest operator’ to delete or add some attribute to our object, rest is an ES6 feature, this feature allow us to get remaining properties in an destructuring object and create a new immutable object. In the following example we are going to show how to use rest operator:
Learning about immutability for the first time will be confusing, but understanding this concept you can build more reliable applications.
I hope you liked this content! Until next time!