JavaScript has lots of array methods for doing things like sorting and reversing arrays, but the biggest problem with all these methods is they mutate the array you are working with. This is a huge problem when you are trying to write React code, functional code, or pure functions. This is why I love the new array methods that add immutable versions of all the mutable array methods we are used to. These methods are included in ECMAScript 2023 specification which has been recently finalized. In this article we will take a look at following new array methods

• toSorted
• toReversed
• toSpliced
• with

The problem and the hack

One of the best known issues with array methods that mutate the array is when you use them in a React component. You can't mutate an array and then try to set it as a new state because the array itself is the same object and this won't trigger a new render. Instead you need to copy the array first, then mutate the copy and set that as the new state. The hack for this was to create a copy of original array first and then mutate it. For example

const fruits = ["banana", "apple", "orange"];

const sortedFruits = Array.from(fruits).sort();

console.log(sortedFruits);
// ['apple', 'banana', 'orange']

New array methods introduced in ES2023 solve this problem.

toSorted

The toSorted method returns a new array of sorted elements. It does not mutate the original array unlike its mutable counterpart sorted.

const fruits = ["banana", "apple", "orange"];

const sortedFruits = fruits.toSorted();

console.log(fruits);
// ['banana', 'apple', 'orange']
console.log(sortedFruits);
// ['apple', 'banana', 'orange']

Know more about toSorted method here

toReversed

The toReversed method returns a new array contained the elements of original array in reversed order. It does not mutate the original array unlike its mutable counterpart reverse

const fruits = ["banana", "apple", "orange"];

const reversedFruits = fruits.toReversed();

console.log(fruits);
// ['banana', 'apple', 'orange']
console.log(reversedFruits);
// ['orange', 'apple', 'banana']

Know more about toReversed method here

toSpliced

The toSpliced method, like splice, does multiple things at once: it removes the given number of elements from the array, starting at a given index, and then inserts the given elements at the same index. However, it returns a new array instead of modifying the original array. The deleted elements therefore are not returned from this method.

const fruits = ["banana", "apple", "orange"];

const splicedFruits = fruits.toSpliced(1, 2, "dragonfruit");

console.log(fruits);
// ['banana', 'apple', 'orange']
console.log(splicedFruits);
// ['banana', 'dragonfruit']

Know more about toSpliced method here

with

The with function is the copy equivalent of using square bracket notation to change one element of an array. The original array is not modified. This allows you to chain array methods while doing manipulations.

const fruits = ["banana", "apple", "orange"];

const newFruits = fruits.with(1, "dragonfruit");

console.log(fruits);
// ['banana', 'apple', 'orange']
console.log(newFruits);
// ['banana', 'dragonfruit', 'orange']

Know more about with method here

Happy Coding 🧑‍💻