'How to remember if a method mutates the original array?
I know I can find a list of mutator methods on MDN, still, in practice I always forget if methods like push() or reverse() mutates the original array or creates a new one. Is there a logic to why certain methods are mutators and some are non-mutators, so I can easily remember?
Solution 1:[1]
Maybe a helpful way to remember them is to identify the mutating methods and group them; there's only a small amount.
Add/remove from array:
Array.prototype.fill()
- overwrite elements anywhereArray.prototype.pop()
- remove from rightArray.prototype.push()
- add to rightArray.prototype.shift()
- remove from leftArray.prototype.unshift()
- add to leftArray.prototype.splice()
- add/remove anywhere
Rearrange arrays:
Array.prototype.sort()
- rearrange elements using a sorting functionArray.prototype.reverse()
- reverse elements
Oddball:
Array.prototype.copyWithin()
- honestly, I've never used this method
List of mutating array methods
Array.prototype.copyWithin()
Array.prototype.fill()
Array.prototype.flat()
Array.prototype.pop()
Array.prototype.push()
Array.prototype.reverse()
Array.prototype.shift()
Array.prototype.sort()
Array.prototype.splice()
Array.prototype.unshift()
List of non-mutating array methods
Array.from()
- create an array from an iterableArray.isArray()
- check if a variable is an arrayArray.of()
- create an array; function version of[]
Array.prototype.concat()
- combine several arrays into a new single arrayArray.prototype.entries()
- get iterator of key/value pairsArray.prototype.every()
- check if every value matches a functionArray.prototype.filter()
- create an array of values matching a filterArray.prototype.find()
- find a value using a functionArray.prototype.findIndex()
- find the index of a value using a functionArray.prototype.flat()
- flatten a nested arrayArray.prototype.flatMap()
- create an new array using a mapping functionArray.prototype.forEach()
- run a side effect for each valueArray.prototype.includes()
- check if the array includes a valueArray.prototype.indexOf()
- find the index of a value by valueArray.prototype.join()
- combine values into a string using a separatorArray.prototype.keys()
- get iterator of keysArray.prototype.lastIndexOf()
- find the index of a value by value, starting at the endArray.prototype.map()
- create a new array using a mapping functionArray.prototype.reduce()
- fold over each value, producing a new valueArray.prototype.reduceRight()
- fold over each value, starting from the right, producing a new valueArray.prototype.slice()
- select a subarrayArray.prototype.some()
- check if some value matches a functionArray.prototype.toLocaleString()
- string representation of the array, usestoLocaleString
on valuesArray.prototype.toString()
- string representation of the array, usestoString
on valuesArray.prototype.values()
- get iterator of valuesArray.prototype[@@iterator]()
- get default iterator
Solution 2:[2]
Any method that causes the indices to shift, diminish or grow, or otherwise changes the original definition of the list, by nature, must be mutable. A mnemonic might be to consider if you want something from the array or want to do something to the array? Shift and pop are arguably confusing because they don't really have an equivalent immutable convenience method like say 'top' or 'last'.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | 4m1r |