JavaScript Array Methods Cheat Sheet

Cheat sheet: JavaScript Array methods

Credits: Axel Rauschmayer

Adding or removing an element at either end of an Array: (return value: item or new array length)

array before method return value array after
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .push(β€œπŸŸ©β€) 4 [β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€,β€πŸŸ©β€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .pop() β€œπŸ”Ίβ€ [β€œπŸŸ¦β€,β€πŸŸ‘β€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .unshift(β€œπŸŸ©β€) 4 [β€œπŸŸ©β€,β€πŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .shift() β€œπŸŸ¦β€ [β€œπŸŸ‘β€,β€πŸ”Ίβ€]
Β  Β  Β  Β 
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .unshift(arr.pop()) 3 [β€œπŸ”Ίβ€,β€πŸŸ¦β€,β€πŸŸ‘β€]

Changing all of an Array (the input Array is modified and returned):

array before method return value
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€,β€πŸŸ©β€] .fill(β€œπŸŸ‘β€) [β€œπŸŸ‘β€,β€πŸŸ‘β€,β€πŸŸ‘β€,β€πŸŸ‘β€]
Array(4) .fill(β€œπŸ”Ίβ€) [β€œπŸ”Ίβ€,β€πŸ”Ίβ€,β€πŸ”Ίβ€,β€πŸ”Ίβ€]
Array(4) .fill(β€œπŸ”Ίβ€).map( (val,idx) => idx ) [ 0, 1, 2, 3 ]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€,β€πŸŸ©β€] .reverse() [β€œπŸŸ©β€,β€πŸ”Ίβ€,β€πŸŸ‘β€,β€πŸŸ¦β€]
[β€œc”,”a”,”d”,”b”] .sort() [β€œa”,”b”,”c”,”d”]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€,β€πŸŸ©β€] .sort() [β€œπŸ”Ίβ€,β€πŸŸ‘β€,β€πŸŸ¦β€,β€πŸŸ©β€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€,β€πŸŸ©β€ ] .copyWithin(1,2,3) [β€œπŸŸ¦β€,πŸ”Ίβ€,β€πŸ”Ίβ€,β€πŸŸ©β€ ]

Finding Array elements:

array method return value
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .includes( β€œπŸŸ¦β€ ) true
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .indexOf( β€œπŸŸ¦β€ ) 0
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸŸ¦β€] .lastIndexOf( β€œπŸŸ¦β€ ) 2
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .find( x => x===β€πŸŸ¦β€ ) β€œπŸŸ¦β€
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .findIndex( x => x===β€πŸŸ¦β€ ) 0

Creating a new Array from an existing Array:

array before method (links to MDN) return value array after
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .slice(1, 3) [β€œπŸŸ‘β€,β€πŸ”Ίβ€] [β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .splice(1, 2) [β€œπŸŸ‘β€,β€πŸ”Ίβ€] [β€œπŸŸ¦β€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸŸ¦β€] .filter( x => x===β€πŸŸ¦β€) [β€œπŸŸ¦β€,β€πŸŸ¦β€] [β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸŸ¦β€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€] .map( x => x+x ) [β€œπŸŸ¦πŸŸ¦β€, β€œπŸŸ‘πŸŸ‘β€] [β€œπŸŸ¦β€,β€πŸŸ‘β€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€] .map( x => [x+x] ) [[β€œπŸŸ¦πŸŸ¦β€], [β€œπŸŸ‘πŸŸ‘β€]] [β€œπŸŸ¦β€,β€πŸŸ‘β€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€] .flatMap( x => [x,x] ) [β€œπŸŸ¦β€,β€πŸŸ¦β€,β€πŸŸ‘β€,β€πŸŸ‘β€] [β€œπŸŸ¦β€,β€πŸŸ‘β€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .concat( [β€œπŸŸ©β€,β€πŸ”΄β€] ) [β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€,β€πŸŸ©β€,β€πŸ”΄β€] [β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€]

Computing a summary of an Array:

array method return value
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .some( x => x===β€πŸŸ‘β€ ) true
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .every( x => x===β€πŸŸ‘β€ ) false
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .join( β€œπŸŸ©β€ ) β€œπŸŸ¦πŸŸ©πŸŸ‘πŸŸ©πŸ”Ίβ€
[ 2, 3, 4 ] .reduce( (result,x) => result+x, 10 ) 19 10+2+3+4
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .reduce( (result,x) => result+x,β€πŸŸ©β€) β€œπŸŸ©πŸŸ¦πŸŸ‘πŸ”Ίβ€
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .reduceRight( (result,x) => result+x,β€πŸŸ©β€) β€œπŸŸ©πŸ”ΊπŸŸ‘πŸŸ¦β€

Listing elements:

array method return value (iterators)
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .keys() [0,1,2]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .values() [β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€]
[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€] .entries() [ [0,β€πŸŸ¦β€], [1,β€πŸŸ‘β€], [2,β€πŸ”Ίβ€] ]
spreading ... required
because the above methods return iterators
return value
[ …[β€œπŸŸ¦β€,β€πŸŸ‘β€,β€πŸ”Ίβ€,β€πŸŸ©β€].entries() ]
Β Β Β Β .map( ([key,val]) => val.repeat(key) )
[””,β€πŸŸ‘β€,β€πŸ”ΊπŸ”Ίβ€,β€πŸŸ©πŸŸ©πŸŸ©β€]