DEV Community

Cover image for JavaScript's Immutable Arrays Revolution.
Ibrahim Bagalwa
Ibrahim Bagalwa

Posted on • Updated on

JavaScript's Immutable Arrays Revolution.

Javascript introduced the powerful feature of changing elements, sort,reverse and splice arrays without changing the original, thus giving it immutability.

Four new methods allow you to change arrays without having to create a copy first.

The new methods are:

1. with()

with() method creates a copy and allows changing the value at a specific index. It produces a new array where the element at the specified index is replaced by the provided value.

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.with(2, "b")); // ["I", "B", "b", "A", "H", "I", "M"]
// replace the second index with the provided value "b"
console.log(arr); // ["I", "B", "R", "A", "H", "I", "M"];
Enter fullscreen mode Exit fullscreen mode

2. toSorted()

toSorted() method returns a brand new array, and the elements in that array are arranged in ascending order.

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toSorted()); // ['A', 'B', 'H', 'I', 'I', 'M', 'R']
console.log(arr); // ["I", "B", "R", "A", "H", "I", "M"];


const numbers = [1, 10, 21, 2];
console.log(numbers.toSorted((a, b) => a - b)) //[1, 2, 10, 21]
Enter fullscreen mode Exit fullscreen mode

3. toReversed()

toReversed() method returns a new array with the elements in reversed order.

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toReversed()); // ['M', 'I', 'H', 'A', 'R', 'B', 'I']

const numbers = [1, 10, 21, 2];
console.log(numbers.toReversed()) //[2, 21, 10, 1]
Enter fullscreen mode Exit fullscreen mode

4. toSpliced()

toSpliced() method returns a new array with some elements removed and/or replaced at a given index.

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toSpliced(3, 3, "BAG")); // ['I', 'B', 'R', 'BAG', 'M']

const months = ["Jan", "Mar", "Apr", "May"];
console.log(months.toSpliced(1, 0, "Feb")) // ["Jan", "Feb", "Mar", "Apr", "May"]

Enter fullscreen mode Exit fullscreen mode

No need to create a copy of an array with [...arr] first before modifying it.

Top comments (8)

Collapse
 
alaindet profile image
Alain D'Ettorre

Image description

Collapse
 
peninah98 profile image
peninah98

Cool features !

Collapse
 
ant_f_dev profile image
Anthony Fung

Here are links to the MDN documentation for more information.

According to those pages, all are available from Chrome v110, and in preview in FireFox v115.

Collapse
 
ibrahimbagalwa profile image
Ibrahim Bagalwa

Yes In development. But Supported in a pre-release version.

Collapse
 
volodyslav profile image
Volodyslav

Nice article 😁

Collapse
 
bateyjosue profile image
Josh Batey

Kudos, Man this so brulliant no spread operator(...) anymore

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
mutesialine profile image
mutesialine

Nice article Ibrahim