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.
Top comments (4)
I'd call that a "defensive copy" rather than being inmutable.
Thank you comment!
Right! strictly speaking, it's not immutable. I didn't know the word "defensive copy".
I guess it wouldn't be hard in Javascript to create a decorator object that wraps your list / array where you get an error or no-op if you try to mutate it.
That would have the advantage of not needing to copy a potentially huge object.
(though map/reduce/etc.. generally do make copies or at least "stream" the new values)
inmutable would be interesting though.. I have no idea how to do that.