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

Nash — Fri, 19 Feb 2021 19:37:12 +0000

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(): popped	list.slice(-1)
#push	push(...arg): lengthNum	[...list, ...items]
#shift	shift(): shifted	[item, ...rest] = list
#unshift	unshift( ...arg ): lengthNum	[...items, ...list]
#reverse	reverse(): reversed	[...list].reverse()
#sort	sort(): sorted	[...list].sort()
#splice / slice	splice( startIdx, deleteCount = 1 ) :listFromStartToEnd	slice(startIdx, endIdx?)

Check one by one.

pop

Mutable: pop(): item

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

Immutable

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

push

Mutable: push(...arg): lengthNum

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

Immutable

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

shift

Mutable: shift(): item

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

Immutable

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

unshift

Mutable: unshift( ...arg ) :lengthNum

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

Immutable

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

reverse

Mutable: reverse(): reversedList

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

Immutable

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

sort

Mutable: sort(): sorted

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

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

Mutable: splice( startIdx, deleteCount = 1 ) :listFromStartToEnd

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?)

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.

DEV Community: Nash

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

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

Point

Methods

pop

push

shift

unshift

reverse

sort

splice / slice

Conclusion