New Array Methods are Awesome

The ECMAScript 2023 (ES2023) specification includes some new methods on the Array object that bring added benefits to our JavaScript programs. These methods provide immutability by default, offering improved predictability and maintainability. Additionally, they can help save time and enhance performance. These exciting additions empower us to write more reliable and efficient code. Let's explore these methods and see how they can elevate our JavaScript development experience. These methods are:

• toSorted()
• toReversed()
• toSpliced()
• with()

toSorted()

The toSorted() method returns a new array that is a sorted copy of the original array. The sort order is determined by the compareFn argument, which is a function that takes two elements of the array and returns a negative number, zero, or a positive number, depending on whether the first element is less than, equal to, or greater than the second element.

For example, the following code sorts an array of numbers in ascending order key here is the original array never mutates:

const numbers = [10, 5, 2, 7, 3];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(sortedNumbers); // [2, 3, 5, 7, 10]
console.log(number) = // [10, 5, 2, 7, 3] no changes in original array

toReversed()

The toReversed() method returns a new array that is a reversed copy of the original array.

For example, the following code reverses an array of strings:

const strings = ["hello", "world"];
const reversedStrings = strings.toReversed();
console.log(reversedStrings); // ["world", "hello"]
console.log(strings); // ["hello", "world"] no changes in original array

toSpliced()

The toSpliced() method returns a new array that is a copy of the original array with the specified elements removed or inserted. The first argument to toSpliced() is the index at which to start removing or inserting elements. The second argument is the number of elements to remove or insert. The third argument is an iterable of elements to insert.

For example, the following code removes the first two elements from an array and then inserts a new element at the end:

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.toSpliced(0, 2, 6);
console.log(newNumbers); // [3, 4, 5, 6]
console.log(numbers); // [1, 2, 3, 4, 5] no changes in original array

with()

The with() method returns a new array that is a copy of the original array with the specified element replaced with a new value. The first argument to with() is the index of the element to replace. The second argument is the new value.

For example, the following code replaces the first element in an array with a new value:

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.with(0, 6);
console.log(newNumbers); // [6, 2, 3, 4, 5]
console.log(numbers); // [1, 2, 3, 4, 5] no changes in original array

These new array methods are a welcome addition to the JavaScript language. They make it easier to work with arrays in a predictable and maintainable way.