Widely availableA strong modern choice when state updates should stay immutable, especially in UI frameworks and reducer-style code.
Arrays Widely available

Array by copy

The array-by-copy methods toSorted(), toReversed(), with(), and toSpliced() return new arrays instead of mutating the original. They make immutable updates much clearer in application code.

ArraysImmutabilityES2023

Overview

The array-by-copy methods toSorted(), toReversed(), with(), and toSpliced() return new arrays instead of mutating the original. They make immutable updates much clearer in application code.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
javascript.builtins.Array.toReversed
110
110
115
16
110
16
Built-in object
Array.toSorted

The toSorted() method of Array instances is the copying version of the Array/sort method. It returns a new array with the elements sorted in ascending order.
110
110
115
16
110
16
Array.toSpliced

The toSpliced() method of Array instances is the copying version of the Array/splice method. It returns a new array with some elements removed and/or replaced at a given index.
110
110
115
16
110
16
Array.with

The with() method of Array instances is the copying version of using the bracket notation to change the value of a given index. It returns a new array with the element at the given index replaced with the given value.
110
110
115
16
110
16
TypedArray.toReversed

The toReversed() method of TypedArray instances is the copying counterpart of the TypedArray/reverse method. It returns a new typed array with the elements in reversed order. This method has the same algorithm as Array.prototype.toReversed().
110
110
115
16
110
16
TypedArray.toSorted

The toSorted() method of TypedArray instances is the copying version of the TypedArray/sort method. It returns a new typed array with the elements sorted in ascending order. This method has the same algorithm as Array.prototype.toSorted(), except that it sorts the values numerically instead of as strings by default.
110
110
115
16
110
16
TypedArray.with

The with() method of TypedArray instances is the copying version of using the bracket notation to change the value of a given index. It returns a new typed array with the element at the given index replaced with the given value. This method has the same algorithm as Array.prototype.with().
110
110
115
16
110
16
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

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

// Sort without modifying the original array
const sorted = original.toSorted();
console.log(sorted);   // [1, 1, 3, 4, 5]
console.log(original); // [3, 1, 4, 1, 5] ← remains unchanged

// Reverse
const reversed = original.toReversed();

// Replace at specific indices
const replaced = original.with(2, 99);
// [3, 1, 99, 1, 5]

// Non-destructive version of splice
const spliced = original.toSpliced(1, 2, 10, 20);
// [3, 10, 20, 1, 5]

Live demo

Tosorted (non-so-t)

source. Array to, so-tnewarray create..

PreviewFullscreen

With (specificelement. replace)

specific. index. Value replacenewarray create..

PreviewFullscreen

Toreversed (non-flip)

source. Array is. to, reverseorder to newarray read..

PreviewFullscreen

Use cases

  • Immutable state updates

    Update arrays in React or similar systems without mutating the previous state object.

  • Safer transformations

    Keep the original input unchanged so tests, memoized values, and debug output stay predictable.

Cautions

  • These methods still create new arrays, so repeated large copies can be expensive in hot paths.
  • Browser support is newer than classic array methods, so verify support targets if your project includes older environments.

Accessibility

  • Immutable updates can reduce UI bugs where list order or selected state changes unexpectedly without a clear re-render.

Related links

Powered by web-features