🔍Exploring New JavaScript Array APIs💻🧩 toSpliced, toReversed, toSorted and with. ✨
Tags: javascript, api, webdev, tutorial
Published: 2024-01-09 16:03:58

A few months ago JavaScript released new APIs for Array instances. These APIs are set to make manipulation of arrays immutable allow for safer and predictable programming practices. Here are the details of these new methods: `toSpliced()`, `toReversed()`, `toSorted()` and `with()`.

## toSpliced() 🔪

The `toSpliced()` method acts similarly to the existing `splice()` method, but instead of altering the original array, it returns a new array with some elements removed and/or replaced. Here is the following API.

```javascript
toSpliced(start)
toSpliced(start, deleteCount)
toSpliced(start, deleteCount, item1)
toSpliced(start, deleteCount, item1, item2)
toSpliced(start, deleteCount, item1, item2, ..., itemN)
```

To remove an item, the example below shows the pizza emoji being removed with an index of 2.

```javascript
const array = ['💻', '🎓', '🍕', '🚀', '🌍'];
const start = 2;

const alteredArray = array.toSpliced(start, 1);

// ['💻', '🎓', '🚀', '🌍']
console.log(alteredArray)
```

To insert an item without removing any elements, note the `0` in the amount of items to delete.

```javascript
const array = ['💻', '🎓', '🍕', '🚀', '🌍'];
const start = 2;

const alteredArray = array.toSpliced(start, 0, '✌️');

// ['💻', '🎓', '✌️', '🍕', '🚀', '🌍']
console.log(alteredArray)
```

The method can also be used for upserting, or updating, an element. But check out the `with()` which can do the same too!

```javascript
const array = ['💻', '🎓', '🍕', '🚀', '🌍'];
const start = 2;

const alteredArray = array.toSpliced(start, 1, '✌️');

// ['💻', '🎓', '✌️', '🚀', '🌍']
console.log(alteredArray)
```

You can find the full detail of parameters in the JavaScript [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced). Accompanying the functionality of element removal is item insertion. The number of items specified after the `deleteCount` will be added at the `start` index. This makes it easy to insert and delete items at the same time.

## toReversed() 🔄

The new `toReversed()` method is a replication of the `reverse()` method. Unlike `reverse()`, `toReversed()` does not affect the original array, rather it returns a new one with the order of the items reversed.  

```javascript
const array = ['💻', '🎓', '🍕', '🚀', '🌍'];

const reversedArray = array.toReversed();

// ['🌍', '🚀', '✌️', '🎓', '💻']
console.log(reversedArray )
```

## toSorted() 📚

The new `toSorted()` functions similarly to `sort()`. However, it leaves the original array unchanged and returns a new sortable array.

```javascript
const array = [1000, 10000, 100, 1, 10];

const sortedArray = array.toSorted();

// [1, 10, 100, 1000, 10000]
console.log(sortedArray)

// False
console.log(array === sortedArray)
```

The `compareFn` function defines the sort order. If left omitted, the items in the array are turned into strings, then sorted based on their Unicode point values.

## with() 👆

Another new addition to the Array prototype is the `with()` method. This method has similar behavior to using the regular bracket notation for modifying the value of a certain array index. However, instead of changing the original array, `with()` returns a new array with the given change.

Here is how you would use it:

```javascript
const array = ['💻', '🎓', '🍕', '🚀', '🌍'];

const alteredArray = array.with(2, '✌️');

// ['💻', '🎓', '✌️', '🚀', '🌍']
console.log(alteredArray)
```

## Can I Use?

At the time of writing this article, [caniused.com](https://caniuse.com/?search=toSplice) reports **87.29%**
for the new methods which represents a majority of native coverage. If coverage is really important to you, you're always free to use polyfills from the [core-js](https://github.com/zloirock/core-js) library.

### When should I used these methods compared to the old ones, sort(), reverse(), splice()?

Depending on the context of where this code lies, if a new array has already been created within a function block or scope, feel free to use the existing APIs to alter the array. They would manipulate elements in place, saving memory consumption. 

When you are dealing with an external object that has been passed into your function, use these methods to return a new array with the altered data to minimize potential side effects.

## Conclusion

That’s all for now! Always stay updated and keep coding. Feel free to explore and experiment with these new features. Happy coding! 💻🎊