Frameworks like React require that when you change the contents of an array or object you change its reference. Or push another way that you don't change arrays but instead create new arrays with updated values (i.e. immutability).

There are older array methods that are incompatible with immutability because they alter the array in place and don't change
the array reference. These are _mutable_ (or _destructive_) methods.

Shown below are replacements for the array destructive methods (e.g. `push`, `pop`, `splice`, `sort`, etc.) that will create new array references with the updated data.

Solutions are provided using the spread operator and also the newer ["change array by copy"](https://github.com/tc39/proposal-change-array-by-copy) methods (`toSpliced`, `toSorted`, `toReversed` and `with`).

## Setting Value At Index

Destructive version:

```js
const myArray = [1, 3, 2];
myArray[1] = 10; // [1, 10, 2]
```

Non-destructive versions:

```js
const myArray = [1, 3, 2];
const newArray = [...myArray];
newArray[1] = 10;
```

Or: 

```js
const myArray = [1, 3, 2];
const newArray = [
  ...myArray.slice(0, 1),
  10,
  ...myArray.slice(2, myArray.length)
];
```

Or (if you have access to `with`):

```js
const myArray = [1, 3, 2];
const newArray = myArray.with(1, 10);
```

## Push

Destructive version:

```js
const myArray = [1, 3, 2];
myArray.push(5); // [1, 3, 2, 5]
```

Non-destructive versions:

```js
const myArray = [1, 3, 2];
const newArray = [...myArray, 5];
```

Or (if you have access to `toSpliced`):

```js
const myArray = [1, 3, 2];
const newArray = myArray.toSpliced(myArray.length, 0, 5);
```

## Pop

Destructive version:

```js
const myArray = [1, 3, 2];
const poppedValue = myArray.pop(); // [1, 3]
```

Non-destructive versions:

```js
const myArray = [1, 3, 2];
const poppedValue = myArray[myArray.length - 1];
const newArray = myArray.slice(0, myArray.length - 1);
```

Or (if you have access to `toSpliced`):

```js
const myArray = [1, 3, 2];
const poppedValue = myArray[myArray.length - 1];
const newArray = myArray.toSpliced(myArray.length - 1, 1);
```

## Shift

Destructive version:

```js
const myArray = [1, 3, 2];
const shiftedValue = myArray.shift(); // [3, 2]
```

Non-destructive version:

```js
const myArray = [1, 3, 2];
const [shiftedValue, ...newArray] = myArray;
```

## Unshift

Destructive version:

```js
const myArray = [1, 3, 2];
myArray.unshift(6); // [6, 1, 3, 2]
```

Non-destructive versions:

```js
const myArray = [1, 3, 2];
const newArray = [6, ...myArray];
```

Or (if you have access to `toSpliced`):

```js
const myArray = [1, 3, 2];
const newArray = myArray.toSpliced(0, 0, 6);
```

## Splice

Destructive version:

```js
const myArray = [1, 3, 2];
myArray.splice(1, 1, 4, 5, 6); // [1, 4, 5, 6, 2]
```

Non-destructive versions:

```js
const myArray = [1, 3, 2];
const newArray = [
  ...myArray.slice(0, 1),
  4, 5, 6,
  ...myArray.slice(2, myArray.length)
];
```

Or (if you have access to `toSpliced`):

```js
const myArray = [1, 3, 2];
const newArray = myArray.toSpliced(1, 1, 4, 5, 6);
```

## Reverse

Destructive version:

```js
const myArray = [1, 3, 2];
myArray.reverse(); // [2, 3, 1]
```

Non-destructive versions:

```js
const myArray = [1, 3, 2];
const newArray = [...myArray].reverse();
```

Or (if you have access to `toReversed`):

```js
const myArray = [1, 3, 2];
const newArray = myArray.toReversed();
```

## Sort

Destructive version:

```js
const myArray = [1, 3, 2];
myArray.sort(); // [1, 2, 3]
```

Non-destructive versions:

```js
const myArray = [1, 3, 2];
const newArray = [...myArray].sort();
```

Or (if you have access to `toSorted`):

```js
const myArray = [1, 3, 2];
const newArray = myArray.toSorted();
```