Immutability in JavaScript
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.
Using JavaScript, we are going to see some types of data and mutable examples, understand about it and refactoring in an immutable way.
JavaScript types
To use immutability concept in JavaScript is very simple, but before we starting code it, we need to learn about data types in JavaScript.
Types into JavaScript get different ways to store the variable values. Variables are categorized in two types, value (primitives), and reference (non-primitives).
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:
- push
- unshift
- pop
- shift
- sort
- reverse
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.
Push
This method adds the item to the end of the array changing the original array.
Mutable:
Immutable:
Unshift
This method adds the item to the start of the array changing the original array.
Mutable:
Immutable:
Pop
This method removes the last element of the array changing the original array.
Mutable:
Immutable:
Shift
This method removes the first element of the array changing the original array.
Mutable:
Immutable:
Sort/Revert
These methods reorder the items of the array, changing the original array.
Mutable:
Immutable:
Immutable objects examples
When we are working with JavaScript objects, we need to ensure that isn’t mutated, because their side effects can be the origin of bugs in our application. Creating some new attribute or modify our value by reference, we could turn the object mutable.
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.
Mutable:
Immutable:
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.
Mutable:
Immutable:
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:
Mutable:
Immutable:
Conclusion
Learning about immutability for the first time will be confusing, but understanding this concept you can build more reliable applications.
So, we learned how to manipulate JavaScript objects/arrays in an immutable way (recreating objects/arrays every time), this concept help us to reduce bugs, problems with data manipulation and a better tracking of our code.
Talking about’s complex manipulation (nested objects/arrays or large objects/arrays) I would like to recommend some libraries, such as ImmutableJS or Immer.
I hope you liked this content! Until next time!
