ES2023 Array Methods - toSorted, toReversed, toSpliced, with

ES2023 Immutable Array Methods

ECMAScript 2023 introduced four new array methods that provide immutable alternatives to existing mutating methods. These are critical for React, Redux, and any code where you must not modify the original array.

toSorted()

Immutable version of sort():

const nums = [3, 1, 4, 1, 5];
const sorted = nums.toSorted((a, b) => a - b);
// sorted: [1, 1, 3, 4, 5]
// nums: [3, 1, 4, 1, 5] (unchanged)

toReversed()

Immutable version of reverse():

const arr = [1, 2, 3, 4, 5];
const reversed = arr.toReversed();
// reversed: [5, 4, 3, 2, 1]
// arr: [1, 2, 3, 4, 5] (unchanged)

toSpliced()

Immutable version of splice():

const months = ["Jan", "Mar", "Apr"];
const fixed = months.toSpliced(1, 0, "Feb");
// fixed: ["Jan", "Feb", "Mar", "Apr"]
// months: ["Jan", "Mar", "Apr"] (unchanged)

with()

Immutable version of bracket assignment arr[i] = value:

const arr = ["a", "b", "c", "d"];
const updated = arr.with(1, "B");
// updated: ["a", "B", "c", "d"]
// arr: ["a", "b", "c", "d"] (unchanged)

Supports negative indices:

arr.with(-1, "D"); // ["a", "b", "c", "D"]

Browser Support

All four methods are supported in:

• Chrome 110+ (March 2023)
• Firefox 115+ (July 2023)
• Safari 16.4+ (March 2023)
• Node.js 20+

Pre-ES2023 Equivalents

// toSorted
const sorted = [...arr].sort(compareFn);

// toReversed
const reversed = [...arr].reverse();

// toSpliced — no clean one-liner
const spliced = [...arr.slice(0, start), ...items, ...arr.slice(start + deleteCount)];

// with
const updated = arr.map((v, i) => i === index ? newValue : v);