# New Array Methods in Javascript

* Recently, some new Array methods have been introduced. These are not yet supported by all browsers.
    

## Array.with()

* The Array.with() method in JavaScript is used to change the value of a given index in the array, returning a new array with the element at the given index replaced with the given value.
    
* The original array is not modified. This allows you to chain array methods while doing manipulations.
    
    ```javascript
    // We create a copy of the original array to make any change
    const animals = ["dog","cat","tiger"];
    const animalsCopy = [...animals];
    animalsCopy[1] = "lion";
    
    console.log("Original",animals); // ["dog","cat","tiger"];
    console.log("Copy",animalsCopy); // ["dog","lion","tiger"];
    ```
    
    ```javascript
    // By using Array.with()
    const animals = ["dog","cat","tiger"];
    const animalsCopy = animals.with(1, "lion")
    
    console.log("Original",animals); // ["dog","cat","tiger"];
    console.log("Copy",animalsCopy); // ["dog","lion","tiger"];
    ```
    
    * we don't create a copy of the original array to make any change in the array.
        

## Array.toSorted()

* Array.toSorted() method in Javascript returns a new array with the elements sorted in ascending order, and it does not modify the original array.
    
* When we use Array.sort() it modifies the original array.
    

```javascript
const numbers = [8,4,0,1];
// We use the copy of the numbers array in order not to modify the original array
const sortedNumbers = [...numbers].sort();

console.log("Original", numbers); // [8,4,0,1]
console.log("Sorted",sortedNumbers); // [0,1,4,8]
```

```javascript
const numbers = [8,4,0,1];
// toSorted() method will sort without modifying the original array
const sortedNumbers = numbers.toSorted();

console.log("Original", numbers); // [8,4,0,1]
console.log("Sorted",sortedNumbers); // [0,1,4,8]
```

## Array.toReversed()

* Array.toReversed() method in Javascript returns a new array with the elements sorted in reversed order, and it does not modify the original array.
    
* When we use Array.reverse() it modifies the original array.
    

```javascript
const numbers = [8,4,0,1];
// We use the copy of the numbers array in order not to modify the original array
const reversedNumbers = [...numbers].reverse();

console.log("Original", numbers); // [8,4,0,1]
console.log("Reversed",reversedNumbers); // [1,0,4,8]
```

```javascript
const numbers = [8,4,0,1];
// We use the copy of the numbers array in order not to modify the original array
const reversedNumbers = numbers.toReversed();

console.log("Original", numbers); // [8,4,0,1]
console.log("Reversed",reversedNumbers); // [1,0,4,8]
```

## Array.toSpliced()

* Array.toSpliced() returns a new array with the specified elements removed, leaving the original array unchanged.
    

When we use Array.splice() method, it modifies the original array.

```javascript
const array = [1, 2, 3, 4, 5]; 
array.splice(0, 2);  

console.log("Original",array); // [3, 4, 5]
```

```javascript
const array = [1, 2, 3, 4, 5];
const newArray = array.toSpliced(0, 2);

console.log("Spliced",newArray); // [3, 4, 5]
console.log("Original",array); // [1, 2, 3, 4, 5]
```

## Reference

* [https://www.youtube.com/watch?v=3CBD5JZJJKw](https://www.youtube.com/watch?v=3CBD5JZJJKw)
    
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Array/toSpliced](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced)
    
* [https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.tospliced](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.tospliced)
    
* [https://caniuse.com/?search=toSpliced](https://caniuse.com/?search=toSpliced)
    

Thanks for Reading 🚀