New array functions in JavaScript - 2023

Today we will take a look at some new array functions in JavaScript and how they can be used.

We will cover

• toReversed()
• toSpliced()
• toSorted()
• with()
• findLastIndex()
• findLast()

What is common for all of the above, is that they are not mutating the original array, they instead are copying and returning a new array - which is a great deal and can save a lot of headache when it comes to debugging strange bugs that mutation can cause.

toReversed()

We will begin with toReversed(), which basically takes the array, copy it, and returning a new array with the items reversed. It is behaving exactly the same as Array.prototype.reverse() but without mutation.

const original = [1, 2, 3, 4, 5];
const reversed = original.toReversed();

console.log(reversed); // [5,4,3,2,1]
console.log(original); // [1,2,3,4,5]

toSpliced()

Next up is the toSpliced() function, which works the same way as splice() but no mutation.

const original = [1, 2, 3, 4, 5];
const spliced = original.toSpliced(0, 2);

console.log(spliced); // [3,4,5]
console.log(original); // [1,2,3,4,5]

toSorted()

toSorted() is the same as for sort, we have a detailed guide on sorting functions here.

const original = [1, 2, 3, 4, 5];

const sorted = original.toSorted((a, b) => {
  if (a > b) {
    return -1;
  } else if (b > a) {
    return 1;
  }
  return 0;
});

console.log(sorted); // [5,4,3,2,1]
console.log(original); // [1,2,3,4,5]

with()

This is a new function, it will replace a given index of the array with a new value, and it is not mutating the array either.

const original = [1, 2, 3, 4, 5];
const replaced = original.with(4, 6);

console.log(replaced); // [1,2,3,4,6]
console.log(original); // [1,2,3,4,5]

findLastIndex()

This is a function that works very similar to the already existing findIndex(), but it is starting from the end of the array and works its way the optional direction.

const arr = [1, 2, 3, 1, 5];
const index = arr.findLastIndex((number) => number === 1);

console.log(index); // 3

Whereas findIndex() would have returned 0 instead.

findLast()

And for our last function today, the findLast() will return the item that correspond to the one we are looking for, but it will start from the last index as well. It works the same as for find().

const persons = [
  { id: 1, name: "Peter" },
  { id: 10, name: "Carl" },
  { id: 5, name: "Peter" },
];
const person = persons.findLast((person) => person.name === "Peter");

console.log(person); // { id: 5, name: "Peter"}

Outro

Today we learned some new function in JavaScript in the Array.prototype. The fact that they are not mutating the original array is very good news, since in large projects where objects are used in many places etc, it can be cumbersome to track unwanted behaviour that mutation can cause. So it is really good news that these new functions has entered the stage!

Any thoughts or feedback on this article? Reach out here with whatever you have on your mind.

All the best,