New Non‑Destructive Array Methods in JavaScript: toReversed, toSorted, toSpliced, and with

ConardLi introduces the latest JavaScript proposal, the 16th article in his series, focusing on new array methods.

The “Change Array by copy” proposal (stage 3) adds four non‑destructive methods— .toReversed() , .toSorted() , .toSpliced() , and .with() —which will soon appear in browsers.

Destructive vs. non‑destructive array methods

Traditional non‑destructive methods include filter , some , map , find , while destructive methods such as sort , reverse , and splice modify the original array.

Developers often create a copy before using a destructive method, e.g.:

const sorted1 = array1.slice().sort();
const sorted2 = [...array1].sort();
const sorted3 = Array.from(array1).sort();

The new methods provide built‑in immutable alternatives.

.toSorted()

.toSorted() returns a sorted copy without altering the original array.

const array = ['c','o','n','a','r','d','l','i'];
const result = array.toSorted();
console.log(result); // ['a','c','d','i','l','n','o','r']
console.log(array);  // ['c','o','n','a','r','d','l','i']

Simple polyfill:

if (!Array.prototype.toSorted) {
  Array.prototype.toSorted = function(compareFn) {
    return this.slice().sort(compareFn);
  };
}

.toReversed()

.toReversed() returns a reversed copy while keeping the original unchanged.

const array = ['c','o','n','a','r','d','l','i'];
const result = array.toReversed();
console.log(result); // ['i','l','d','r','a','n','o','c']
console.log(array);  // ['c','o','n','a','r','d','l','i']

Polyfill:

if (!Array.prototype.toReversed) {
  Array.prototype.toReversed = function() {
    return this.slice().reverse();
  };
}

.with()

.with() creates a new array with the element at a given index replaced, leaving the source array untouched.

const array = ['c','o','n','a','r','d','l','i'];
const result = array.with(0, 'ConardLi');
console.log(result); // ['ConardLi','o','n','a','r','d','l','i']
console.log(array);  // ['c','o','n','a','r','d','l','i']

Polyfill:

if (!Array.prototype.with) {
  Array.prototype.with = function(index, value) {
    const copy = this.slice();
    copy[index] = value;
    return copy;
  };
}

.toSpliced()

.toSpliced() is the immutable counterpart of splice ; it returns a new array reflecting the splice operation while the original remains unchanged.

const array = [1,2,3,4,5,6];
const result = array.toSpliced(1, 2, 0);
console.log(result); // [1,0,4,5,6]
console.log(array);  // [1,2,3,4,5,6]

Polyfill:

if (!Array.prototype.toSpliced) {
  Array.prototype.toSpliced = function(start, deleteCount, ...items) {
    const copy = this.slice();
    copy.splice(start, deleteCount, ...items);
    return copy;
  };
}

Because the proposal is still in stage 3, using a polyfill (available at the GitHub repository) is recommended for production code.