DEV Community

Nash
Nash

Posted on • Updated on

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

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'
Enter fullscreen mode Exit fullscreen mode

Immutable

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

push

Mutable: push(...arg): lengthNum

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

Immutable

list = ['a', 'b', 'c']
newList = [...list, 'd', 'e']
// newList: ['a', 'b', 'c', 'd', 'e']
Enter fullscreen mode Exit fullscreen mode

shift

Mutable: shift(): item

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

Immutable

list = ['a', 'b', 'c']
[item, ...rest] = list
// item: 'a', rest: ['b', 'c']
Enter fullscreen mode Exit fullscreen mode

unshift

Mutable: unshift( ...arg ) :lengthNum

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

Immutable

list = ['a', 'b', 'c']
newList = ['x', ...list]
// newList: ['x', 'a', 'b', 'c']
Enter fullscreen mode Exit fullscreen mode

reverse

Mutable: reverse(): reversedList

list = ['a', 'b', 'c']
list.reverse()
// list: ['c', 'b', 'a']
Enter fullscreen mode Exit fullscreen mode

Immutable

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

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Conclusion

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

Top comments (4)

Collapse
 
aminmansuri profile image
hidden_dude

I'd call that a "defensive copy" rather than being inmutable.

Collapse
 
snamiki1212 profile image
Nash

Thank you comment!

Right! strictly speaking, it's not immutable. I didn't know the word "defensive copy".

Collapse
 
aminmansuri profile image
hidden_dude

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)

Collapse
 
aminmansuri profile image
hidden_dude

inmutable would be interesting though.. I have no idea how to do that.