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"];
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]
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]
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"]
No need to create a copy of an array with [...arr]
first before modifying it.
Top comments (8)
Cool features !
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.
Yes In development. But Supported in a pre-release version.
Nice article 😁
Kudos, Man this so brulliant no spread operator(...) anymore
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
Nice article Ibrahim