If you are a javascript developer like me, you probably have used array methods quite a lot. While the array methods in javascript are performant, in terms of immutability we did face a shortage of methods. Let me make it clear with an example:
// Define an array
const arr = [1, 2, 5, 8];
// Replace the second element with 7
Now, you might say, it's easy, just do this: arr[1] = 7 and you won't be wrong. It definitely works. But in doing so, you have mutated(changed) the original array. If you now print the array, it will be something like this.
console.log(arr); //Prints [1, 7, 5, 8]
So, what is the alternative?
Upto this point, the easiest way is to make a copy and apply the transformations.
const arr = [1, 2, 5, 8];
const copyArr = [...arr];
copyArr[1] = 7;
console.log(copyArr); // Prints [1, 7, 5, 8]
console.log(arr); // Prints [1, 2, 5, 8]
But now we have a few extra methods that make our life easier and makes the code more understandable.
with method
The with method essentially makes a copy of the array and changes the value at a given index in the array. So, now instead of doing something like this: const copyArr = [...arr] and copyArr[1] = 7, we can copy the array and change the value at index 1 with this snippet:
const arr = [1, 7, 5, 8];
const copyArr = arr.with(1, 70);
console.log(copyArr); // Prints [1, 70, 5, 8]
console.log(arr); // Prints [1, 7, 5, 8]
toSorted method
The sort method, as you might be familiar with already, sorts the array in-place. To ensure immutability, we first have to copy the array and then apply the sort method. Which means there's at least 2 passes on the array, thus giving O(2n) time complexity at best.
However, with toSorted javascript only does one pass over the array to copy and sort it.
const arr = [1, 7, 5, 8];
const copyArr = arr.toSorted();
console.log(copyArr); // Prints [1, 5, 7, 8]
console.log(arr); // Prints [1, 7, 5, 8]
toReversed method
This method is similar to the toSorted method. It replaces the already existing reverse method for immutability.
const arr = [1, 7, 5, 8];
const copyArr = arr.toReversed();
console.log(copyArr); // Prints [8, 5, 7, 1]
console.log(arr); // Prints [1, 7, 5, 8]
toSpliced method
This method is the copying instance version of the popular splice method which provides many overloads to delete from an index, insert into an index, delete all entries after an index. So, it goes without saying that it helps us a lot in performing immutable array operations.
const arr = [1, 7, 5, 8];
const copyArr = arr.toSpliced(0, 3, 44);
console.log(copyArr); // Prints [44, 8]
console.log(arr); // Prints [1, 7, 5, 8]
Conclusion
These new array methods are all available in prototype of Array. However, these are new features and might not be supported by all browsers. As of the writing of this blog, these are not yet supported in any version of Firefox browser and only recent versions of Chrome browser supports these new methods. Safari, Edge and Opera also support these methods in newer versions (Ref: https://caniuse.com)
Top comments (1)
Good one !!