New Array Methods in JS
Tags: javascript, programming, webdev
Published: 2023-06-09 19:17:11

If you are a javascript developer like me, you probably have used array methods quite a lot. While the array methods in javascript are performant, in terms of immutability we did face a shortage of methods. Let me make it clear with an example:

```
// Define an array
const arr = [1, 2, 5, 8];

// Replace the second element with 7
```
Now, you might say, it's easy, just do this: `arr[1] = 7` and you won't be wrong. It definitely works. But in doing so, you have mutated(changed) the original array. If you now print the array, it will be something like this.
```
console.log(arr); //Prints [1, 7, 5, 8]
```

## So, what is the alternative?
Upto this point, the easiest way is to make a copy and apply the transformations.
```
const arr = [1, 2, 5, 8];
const copyArr = [...arr];
copyArr[1] = 7;
console.log(copyArr); // Prints [1, 7, 5, 8]
console.log(arr); // Prints [1, 2, 5, 8]
```

But now we have a few _extra_ methods that make our life easier and makes the code more understandable.


## _with_ method
The with method essentially makes a copy of the array and changes the value at a given index in the array. So, now instead of doing something like this: `const copyArr = [...arr]` and `copyArr[1] = 7`, we can copy the array and change the value at _index_ 1 with this snippet:
```
const arr = [1, 7, 5, 8];
const copyArr = arr.with(1, 70);
console.log(copyArr); // Prints [1, 70, 5, 8]
console.log(arr); // Prints [1, 7, 5, 8]
```


## _toSorted_ method
The _sort_ method, as you might be familiar with already, sorts the array _in-place_. To ensure immutability, we first have to copy the array and then apply the _sort_ method. Which means there's at least 2 passes on the array, thus giving `O(2n)` time complexity at best.
However, with _toSorted_ javascript only does one pass over the array to copy and sort it.
```
const arr = [1, 7, 5, 8];
const copyArr = arr.toSorted();
console.log(copyArr); // Prints [1, 5, 7, 8]
console.log(arr); // Prints [1, 7, 5, 8]
```


## _toReversed_ method
This method is similar to the _toSorted_ method. It replaces the already existing _reverse_ method for immutability.
```
const arr = [1, 7, 5, 8];
const copyArr = arr.toReversed();
console.log(copyArr); // Prints [8, 5, 7, 1]
console.log(arr); // Prints [1, 7, 5, 8]
```


## _toSpliced_ method
This method is the copying instance version of the popular _splice_ method which provides many overloads to delete from an index, insert into an index, delete all entries after an index. So, it goes without saying that it helps us a lot in performing immutable array operations.
```
const arr = [1, 7, 5, 8];
const copyArr = arr.toSpliced(0, 3, 44);
console.log(copyArr); // Prints [44, 8]
console.log(arr); // Prints [1, 7, 5, 8]
```



## Conclusion
These new array methods are all available in prototype of Array.  However, these are new features and might not be supported by all browsers. As of the writing of this blog, these are not yet supported in any version of Firefox browser and only recent versions of Chrome browser supports these new methods. Safari, Edge and Opera also support these methods in newer versions (_Ref_: https://caniuse.com)