4 New ES2023 array methods 🔥
Tags: javascript, webdev, beginners, frontend
Published: 2023-06-02 11:56:29

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
```javascript
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`.
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted)
## 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`
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed)

## 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.
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced)

## 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.
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with)

Happy Coding 🧑‍💻