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?

Up to 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 make 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. This means there are 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, and delete all entries after an index. So, 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 the 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 support these new methods. Safari, Edge and Opera also support these methods in newer versions (Ref: https://caniuse.com)