Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 19, 2021 07:37 pm GMT

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 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.

ActionMutableImmutable
#poppop(): poppedlist.slice(-1)
#pushpush(...arg): lengthNum[...list, ...items]
#shiftshift(): shifted[item, ...rest] = list
#unshiftunshift( ...arg ): lengthNumnewList = [...items, ...list]
#reversereverse(): reversednewList = [...list].reverse()
#sortsort(): sorted[...list].sort()
#splice / slicesplice( startIdx, deleteCount = 1 ) :listFromStartToEndslice(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 = ['b', 'a', 'c']list.sort() // ASC// list: ['a', 'b', 'c']list.sort((a, b) => b - a) // DESC// list: ['c', 'b', 'a']
Enter fullscreen mode Exit fullscreen mode

Immutable

list = ['b', 'a', 'c']asc  = [...list].sort()desc = [...list].sort((a, b) => b - a)// asc:  ['a', 'b', 'c']// desc: ['c', 'b', 'a']
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.


Original Link: https://dev.to/snamiki1212/how-to-manipulate-immutably-and-mutably-javascript-array-with-only-es6-3ig7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To