🔍Exploring New JavaScript Array APIs💻🧩 toSpliced, toReversed, toSorted and with. ✨

Laurendy Lam — Tue, 09 Jan 2024 16:03:58 +0000

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.

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.

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.

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!

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. 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.

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.

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:

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

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

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

Can I Use?

At the time of writing this article, caniused.com 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 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! 💻🎊

DEV Community: Laurendy Lam