This content originally appeared on DEV Community and was authored by Nash
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 JavaScript method immutably in spite of the mutable as long as we use a spread operator well.
I believe this is a better way as much as I know 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 | newList = [...items, ...list] |
| #reverse | reverse(): reversed | newList = [...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 = ['b', 'a', 'c']
list.sort() // ASC
// list: ['a', 'b', 'c']
list.sort((a, b) => b - a) // DESC
// list: ['c', 'b', 'a']
Immutable
list = ['b', 'a', 'c']
asc = [...list].sort()
desc = [...list].sort((a, b) => b - a)
// asc: ['a', 'b', 'c']
// desc: ['c', 'b', 'a']
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.
This content originally appeared on DEV Community and was authored by Nash
Nash | Sciencx (2021-02-19T19:37:12+00:00) How to manipulate immutably and mutably JavaScript Array with only ES6+. Retrieved from https://www.scien.cx/2021/02/19/how-to-manipulate-immutably-and-mutably-javascript-array-with-only-es6/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.