Exploring New Non-Mutating Array Methods in ECMAScript 2023

JavaScript has traditionally offered array methods that mutate the original array. With the release of ECMAScript 2023 (ES14), JavaScript introduced four powerful, non-mutating array methods: .toReversed(), .toSpliced(), .with(), and .sorted(). These methods create modified copies without changing the original array, enabling more functional programming styles and greater code safety. Let's dive into each method and compare it with their older, mutating counterparts.

1. .toReversed() – Reversing an Array Without Mutation

The .toReversed() method returns a new array with the elements in reverse order, leaving the original array unaltered. This is an alternative to the .reverse() method, which modifies the array directly.

Example:

const arr = [1, 2, 3, 4];
const reversedArr = arr.toReversed();

console.log(arr);           // [1, 2, 3, 4]
console.log(reversedArr);   // [4, 3, 2, 1]        

Comparison with .reverse():

The traditional .reverse() modifies the original array, which can lead to unintended side effects if you don’t want the original order altered:

const arr = [1, 2, 3, 4];
const reversedArr = arr.reverse();

console.log(arr);           // [4, 3, 2, 1] - original array is modified
console.log(reversedArr);   // [4, 3, 2, 1]        

With .toReversed(), you retain the original array order, which is particularly useful when working in a functional programming style where immutability is valued.

2. .toSpliced() – Non-Mutating Version of .splice()

.toSpliced() offers the same functionality as .splice() but returns a new array with the specified changes instead of modifying the original array. It can add, remove, or replace elements starting from a specific index.

Example:

const arr = [1, 2, 3, 4];
const splicedArr = arr.toSpliced(1, 2, 8, 9);

console.log(arr);           // [1, 2, 3, 4]
console.log(splicedArr);    // [1, 8, 9, 4]        

Comparison with .splice():

The traditional .splice() directly alters the original array:

const arr = [1, 2, 3, 4];
const splicedArr = arr.splice(1, 2, 8, 9);

console.log(arr);                // [1, 8, 9, 4] - original array is modified
console.log(splicedArr);    // [2, 3] - elements that were removed        

With .toSpliced(), the original array [1, 2, 3, 4] remains intact, while you get a new array with the changes applied.

3. .with() – Replacing Elements Without Changing the Original Array

The .with() method creates a new array with an element at a specified index replaced by a new value. Previously, to achieve a similar effect without mutation, you’d need to use a combination of array spread syntax or slice operations.

Example:

const arr = [1, 2, 3, 4];
const newArr = arr.with(2, 99);

console.log(arr);             // [1, 2, 3, 4]
console.log(newArr);      // [1, 2, 99, 4]        

Comparison with Existing Techniques:

Previously, achieving non-mutating replacement required either a spread operator or slice:

const arr = [1, 2, 3, 4];
const newArr = [...arr.slice(0, 2), 99, ...arr.slice(3)];

console.log(arr);             // [1, 2, 3, 4] - original array remains unchanged
console.log(newArr);      // [1, 2, 99, 4]        

.with() simplifies this by allowing you to specify the index and value in a single call, improving readability and reducing code complexity.

4. .sorted() – Sorting an Array Without Mutation

.sorted() returns a sorted copy of the array without changing the original. This is an alternative to .sort(), which mutates the array directly. You can also pass a custom compare function, similar to .sort().

Example:

const arr = [3, 1, 4, 1, 5, 9];
const sortedArr = arr.sorted();

console.log(arr);          // [3, 1, 4, 1, 5, 9]
console.log(sortedArr);    // [1, 1, 3, 4, 5, 9]        

Comparison with .sort():

The original .sort() sorts the array in place, which modifies the array order:

const arr = [3, 1, 4, 1, 5, 9];
const sortedArr = arr.sort();

console.log(arr);          // [1, 1, 3, 4, 5, 9] - original array is modified
console.log(sortedArr);    // [1, 1, 3, 4, 5, 9]        

With .sorted(), you avoid mutating the original array, which is beneficial when working with arrays that need to retain their original order for other operations or debugging

Why Use These New Methods?

These non-mutating methods are particularly useful in scenarios where immutability is preferred, such as in functional programming or Redux-style state management. By returning a new array instead of modifying the existing one, these methods reduce potential side effects and make code easier to read, understand, and maintain.

In addition, these methods contribute to safer, more predictable code. They eliminate the risk of unexpected mutations, which can lead to bugs in larger applications where multiple functions might share and modify the same array.