The Array Methods Coming to JavaScript in 2022 by@smpnjn

The Array Methods Coming to JavaScript in 2022

April 26th 2022 14,883 reads
Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
Gangstalking is a serious felony in which gang members, hold a victim’s personal information. They threaten the victim by making them aware that they are constantly being monitored, therefore the victims develop mental illnesses. Using some technology, your app can protect the privacy all of the people involved in the project. And it works some remedy for their victim.
Johnny Simpson HackerNoon profile picture

Johnny Simpson

Product, Engineering, Web

twitter social iconinstagram social icongithub social iconlinkedin social icon

In previous articles, I've covered that Javascript stores objects and arrays in heap storage. That means that an array is created once, and then any updates to it in the future will update that original array. For example:

let myArray = [ 1, 2, 3 ];
let newArray = myArray;

newArray[0] = 2;

// Both return [ 2, 2, 3 ]
console.log(newArray, myArray);

As such, we often find ourselves making copies or cloning arrays to make changes on them without affecting the original. A common way to do that is with the three dots operator:

let myArray = [ 1, 2, 3];
let newArray = [...myArray];

newArray[0] = 2;

// Returns [ 2, 2, 3 ] and [ 1, 2, 3 ]
console.log(newArray, myArray);

Since cloning is so common, a new specification has been written which has reached stage 3, which will give us a host of new ways to copy and then change an array. This proposal is called the "Change Array by Copy" proposal. Let's take a look at how it works.


Currently, these features are not supported in any major browser or Node.JS version. We can expect them to be supported soon though since this specification has reached Stage 3 in the Javascript proposal process. This section will be updated as support changes.

Saying that, a polyfill does exists to recreate the behaviour of this proposal, which you can use today.

New Change Array by Copy Methods

The new proposal adds 4 new methods which will copy an array, and then change it in some way. These are:

  • Array.prototype.toReversed() - clone an array, and then reverse it
  • Array.prototype.toSorted(compareFn) - clone an array, and then sort it.
  • Array.prototype.toSpliced(start, deleteCount, ...items) - clone an array, and splice it in some way.
  • Array.prototype.with(index, value) - clone an array, and add a new element somewhere within it.

All of these methods will work on TypedArray data too, for example, Int8Array.


toReversed does exactly what it says - it takes an array, and reverses it. Since this function clones the array, we don't need to do any copying to create a new version of our original array:

let x = [ 1, 2, 3 ];
let y = x.toReversed();

// Returns [ 1, 2, 3 ], [ 3, 2, 1 ]
console.log(x, y);


toSorted, is a non-destructive version of sort(), meaning it does not alter the original array. By default, will take an array and sort it numerically. For example:

let x = [ 5, 3, 4, 2, 1 ];
let y = x.toSorted(); // [ 1, 2, 3, 4, 5 ]

It also accepts a comparison function, which works the same as the sort() method in Javascript, and is useful when working with an array of objects. For example:

let x = [
    { value: 0 },
    { value: 4 },
    { value: 2 },
    { value: 3 }

// y becomes:
// [
//    { value: 0 },
//    { value: 2 },
//    { value: 3 },
//    { value: 4 }
// ]
let y = x.toSorted((a, b) => {
    return a.value - b.value


toSpliced() is a non-destructive version of splice(), meaning it does not alter the original array. It accepts three arguments:

  • start - the position to start at.
  • deleteCount - the number of elements to remove.
  • ...items - any items to insert at the start position after deletion.

For example:

let x = [ "Dog", "Cat", "Zebra", "Bat", "Tiger", "Lion" ];

// y is [ "Dog", "Snake", "Bat", "Tiger", "Lion" ]
let y = x.toSpliced(1, 2, "Snake");

// z is [ "Dog, "Tiger", "Lion" ]
let z = x.toSpliced(1, 3);

The above is a perfect example of how these copy functions are useful - using the original splice() method, we would remove elements from x and permanently change them. Using toSpliced(), we can change x many times, without worrying about its contents changing.


Finally, we have with(), which simply changes one element in an existing array. In essence, take Array A and show it with something else. Here is an example of it in action.

let x = [ "Dog", "Cat", "Lizard" ]
// y is now [ "Dog", "Zebra", "Lizard" ]
let y = x.with(1, "Zebra")
// z is now [ "Tiger", "Cat", "Lizard" ]
let z = x.with(0, "Tiger")

Again, we've been able to make multiple new arrays from one initial array, without having to create a copy each time.


These array additions are pretty uncontroversial, and much-needed addition to a language that normally maintains only one copy of an array or object. Using these new methods, Javascript removes confusion and complexity in code. Although not as big of a change as something like Temporal, it is still a welcome addition to the language.

Also Published here

react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

. . . comments & more!