Future-Proof Your JavaScript Code
Tags: arrays, javascript, web, python
Published: 2023-05-30 18:14:38

---
title: Future-Proof Your JavaScript Code
published: true
date: 2023-05-30 18:07:23 UTC
tags: arrays,javascript,web, python
canonical_url: https://javascript.plainenglish.io/future-proof-your-javascript-code-9471e9b3676f
---

### Future-Proof Your JavaScript Code: The Game-Changing Immutability Revolution

![1](https://cdn-images-1.medium.com/max/1024/1*a2X20MBG5FswCc_5rOlNNQ.jpeg)

In this article, we will explore a set of new array methods that offer a fresh approach to achieving immutability.

The methods under discussion are with, toSorted, toReversed, and toSpliced.

Immutability ensures that the original array remains unchanged, and modifications are made on a new copy. While there were existing techniques for achieving immutability, such as utilizing the spread operator, these new array methods present more convenient alternatives.

These methods offer improved code readability and performance benefits, making them advantageous for developers.

![](https://cdn-images-1.medium.com/max/525/1*op_Qx8-AxhGN6dUA4tPUHg.png)

1. **with() Method**

The with() method of [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) instances is the [copying](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#copying_methods_and_mutating_methods) version of using the [bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#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.

array.with(index, value) — will return a new array with the element at index replaced with value.

```
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
```

**2. toSpliced()**

splice() — is method that will work on your original array, rather that on their copy.

For eg: — in below example, splice has replaced the start and end index with the new value i.e. ““mango””

![](https://cdn-images-1.medium.com/max/1001/1*2AnL-qmbdPRG1rvd3h7FLg.png)

what toSpliced() will do, it will not update the original array, rather than work on its copy and original array remains intact. It returns a new array instead of modifying the original array.

![](https://cdn-images-1.medium.com/max/708/1*smEHKVMB8SQ0jxV3Gr2awQ.png)

**3. toSorted()**

Normally, we do sort by adding **sort()** after any array, and it will sort the original array, there is a change in original array.

![](https://cdn-images-1.medium.com/max/931/1*4jrJQ_vwLzo4w2vBnAgYBQ.png)

To remain intact with original array, you need to introduced spread operator and create a separate copy of that like this.

![](https://cdn-images-1.medium.com/max/962/1*LYz9Tb9QyuNZrqt_3BsW2Q.png)

To remove this step, javascript has a new array method, there is no need to use the spread operator ie. toSorted()

![](https://cdn-images-1.medium.com/max/686/1*Liz66Yxyu3FdJ-w1dNGqUA.png)

**4. toReversed()**

This method is working same as **array.reverse(),** but rather than changing original array, it will create a new copy and original array remains intact.

![](https://cdn-images-1.medium.com/max/526/1*wXWsCUJj31vGJP2NmqZtFA.png)

Before using, any of these methods, please check their browser compatibility as many of them is not supported in Firefox, so make use if required. [https://caniuse.com/?search=array.with](https://caniuse.com/?search=array.with)

Also please make sure to check [MDN Website](https://developer.mozilla.org/en-US/)to check for upcoming features in Javascript.

### Thanks for reading

- 👏 Please clap for the story and follow me 👉
- 📰 [View more content](https://medium.com/@vivekdogra02)
- 🔔 Follow me: [LinkedIn](https://www.linkedin.com/in/vivek-dogra-7404a530/)| [Twitter](https://twitter.com/VivekDo07905087)| [Github](https://github.com/vivekdogra02)

* * *