How to manipulate immutably and mutably JavaScript Array with only ES6+
Tags: javascript, es6, immutable, mutable
Published: 2021-02-19 19:37:12

---
title: How to manipulate immutably and mutably JavaScript Array with only ES6+
published: true
description: 
tags: JavaScript,ES6,immutable,mutable
---


# How to manipulate immutably and mutably JavaScript Array with only ES6+


JavaScript is not pure functional programming so some method has a side effect.

When I started to learn JavaScript's methods, every time I confused about which method is immutable/mutable or what is a return value. 

Especially, we developers might frequently use Array's methods. So I have always wanted to organize basic Array's methods of how to manipulate mutably and immutably without any library, using pure JavaScript.

## Point

Basically, some of JavaScript Array's methods are mutable so a key is a spread operator. We can use a mutable method as if immutably as long as we use a spread operator well.

I believe this is a better way from a perspective of simplicity more than another.

## Methods

Here is a summary table.

| Action         | Mutable                                                 | Immutable                     |
| -------------- | ------------------------------------------------------- | ----------------------------- |
| [#pop](#pop)            | pop(): popped                                           | list.slice(-1)                |
| [#push](#push)           | push(...arg): lengthNum                                 | [...list, ...items]           |
| [#shift](#shift)          | shift(): shifted                                        | [item, ...rest] = list        |
| [#unshift](#unshift)        | unshift(  ...arg ): lengthNum                           | [...items, ...list] |
| [#reverse](#reverse)        | reverse(): reversed                                | [...list].reverse() |
| [#sort](#sort)           | sort(): sorted                                             | [...list].sort()              |
| [#splice / slice](#splice_and_slice) | splice( startIdx, deleteCount = 1 ) :listFromStartToEnd | slice(startIdx, endIdx?)      |

Check one by one.


### pop

Mutable: [pop(): item](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)

```ts
list = ['a', 'b', 'c']
item = list.pop()
// list: ['a', 'b'], item: 'c'
```



Immutable

```ts
list = ['a', 'b', 'c']
[item] = list.slice(-1)
// item: 'c'
```



### push

Mutable: [push(...arg): lengthNum](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)

```ts
list = ['a', 'b', 'c']
length = list.push('d', 'e')
// list: ['a', 'b', 'c', 'd', 'e'], length: 5
```



Immutable

```ts
list = ['a', 'b', 'c']
newList = [...list, 'd', 'e']
// newList: ['a', 'b', 'c', 'd', 'e']
```



### shift

Mutable: [shift(): item](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)

```ts
list = ['a', 'b', 'c']
item = list.shift()
// list: ['b', 'c'], item: 'a'
```



Immutable

```ts
list = ['a', 'b', 'c']
[item, ...rest] = list
// item: 'a', rest: ['b', 'c']
```



### unshift

Mutable: [unshift(  ...arg ) :lengthNum](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)

```ts
list = ['a', 'b', 'c']
length = list.unshift('x')
// list: ['x', 'a', 'b', 'c'], length: 4
```



Immutable

```ts
list = ['a', 'b', 'c']
newList = ['x', ...list]
// newList: ['x', 'a', 'b', 'c']
```



### reverse

Mutable: [reverse(): reversedList](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)

```ts
list = ['a', 'b', 'c']
list.reverse()
// list: ['c', 'b', 'a']
```



Immutable

```ts
list = ['a', 'b', 'c']
newList = [...list].reverse()
// newList: ['c', 'b', 'a']
```



### sort

Mutable: [sort(): sorted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

```ts
list = [2, 1, 3]

list.sort((a, b) => a - b) // ASC
// list: [1, 2, 3]

list.sort((a, b) => b - a) // DESC
// list: [3, 2, 1]
```



Immutable

```ts
list = [2, 1, 3]
asc  = [...list].sort((a, b) => a - b)
desc = [...list].sort((a, b) => b - a)
// asc:  [1, 2, 3]
// desc: [3, 2, 1]
```



### splice / slice <a name="splice_and_slice"></a>

Mutable: [splice( startIdx, deleteCount = 1 ) :listFromStartToEnd](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

```ts
list = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
spliced = list.splice(2, 3)
// [           'c', 'd', 'e'          ] // <= spliced
// ['a', 'b',                'f', 'g' ] // <= list
```



Immutable: [slice(startIdx, endIdx?)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)

```ts
list = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
sliced = list.slice(2, 5)
remain = [...list.slice(0,2), ...list.slice(5, 7)]
// [           'c', 'd', 'e'          ] // <= sliced
// ['a', 'b',                'f', 'g' ] // <= remain
```



## Conclusion

Don't hate mutable JavaScript methods, use a spread operator well.