Array Cheatsheet

A few days ago I came across a very nice post from Emma Bostian, a RegExp Cheatsheet.

And that post looked so useful at the time that it got me inspired to do something similar. So I picked arrays. Here is a small selection of methods which I believe if you keep them at hand, youโ€™ll be a more productive JavaScript developer.

Table of Contents

  1. flat
  2. flatMap
  3. every
  4. some
  5. reduceRight
  6. unshift
  7. slice
  8. sort
  9. from
  10. copyWithin
  11. lastIndexOf
  12. find
  13. findIndex
  14. Breaking out of Loops


Reduce the number of layers in an array

const bigArray = [[22], [33, 55, [23, 11], 50], 100, 109]
const oneLess = bigArray.flat()
// [22, 33, 55, [23, 11], 50, 100, 109]
const allGone = bigArray.flat(Infinity)
// [22, 33, 55, 23, 11, 50, 100, 109]

It accepts one param depth: number, which specifies the number of layers you to remove. Default is 1.

โšก๏ธ Check this video on Array.flat() in less than a minute!


Opposed to the name suggests, flatMap() is the same as map().flat(1), not the other way around.

๐Ÿšจ Notice the 1 to flat(). flatMap always runs with a depth of 1.

Because flatMap removes empty arrays, the output array does not need to have the same length as the original.

const mutants = ['Wolverine', 'Storm', 'Jubilee', 'Cyclops']
// React-like environment. JSX ๐Ÿ‘‡
const App = () => (
{mutants.flatMap((mutant, index) => [
...(index > 0 ? [', '] : []),
// Wolverine, Storm, Jubilee, Cyclops

โšก๏ธ Check this video on Array.flatMap() in less than a minute!


Receives a callback in the very same way as the more popular map, filter. Though .every() outputs a boolean stating if every item in the iterated array matches the condition in the callback.

const menu = {
type: '๐Ÿ”',
quantity: 'big',
type: '๐Ÿ•',
quantity: 'big',
type: '๐Ÿœ',
quantity: 'medium',
const hasOnlyBigMeals = menu.every(({ quantity }) => quantity === 'big')
// false (๐Ÿœ is 'medium')


Receives a callback in the very same way as the more popular map, filter (and every right above). In the same way as every, it outputs a boolean describing the matched condition in the callback. Though, some returns true if at least one item in the array matches the condition.

const menu = {
type: '๐Ÿ”',
price: 10.9,
type: '๐Ÿ•',
price: 3.9,
type: '๐Ÿœ',
price: 8.9,
const hasPricey = menu.some(({ price }) => price > 10)
// true (๐Ÿ” is above 10)

โšก๏ธ Want to know more about checking your array for content? Watch this quick video about some, every, and includes!


This one behaves exactly like the more popular .reduce() with the only exception that it runs in reverse other. Reduce-RIGHT. Get it? ๐Ÿ˜…

const dogs = ['corgi', 'beagle', 'schnauzer']
dogs.reduceRight((acc, item, index, arr) => {
return `${acc} ${item}${index === 0 ? ' ๐Ÿฆด' : ', '}`
}, '')
// schnauzer, beagle, corgi ๐Ÿฆด


Adds an element to the beginning of the array.

const xmen = ['Cyclops', 'Jean Grey', 'Storm', 'Beast']
// ['Wolverine', 'Cyclops', 'Jean Grey', 'Storm', 'Beast']


Returns a shallow copy of the passed array from start (defaults to first element) to end (defaults to last element).

const xmen = ['Jubilee', 'Kitty Pride', 'Storm']
xmen.slice(0, 2)
// ['Jubilee', 'Kitty Pride']

โ—Pro-tip: very useful for using mutating methods with Functional Programming paradigms


arranges the items in an array at a specific order. Default is ascending. It accepts a compare function as callback, first and second element are the respective params.

๐Ÿšจ Careful! elements will be coerced into string

let numbers = [8, 1, 11, 4]
//['1', '11', '4', '8']
let numbersAgain = [8, 1, 11, 4]
numbersAgain.sort((a, b) => a - b)
// [1, 4, 8, 11]
numbersAgain.sort((a, b) => b - a)
// [11, 8, 4, 1]

If compare function returns

  • less than 0: a goes before b
  • 0: everything stays as is
  • more than 0: a goes after b


creates a new, shallow-copied Array instance from an array-like or iterable.

const object = {
0: 'a'
1: 'b'
2: 'c'
length: 3 // it needs to have length prop here
// ['a', 'b', 'c']


copies part of an array to the another location inside the same array without altering its length.

const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
array.copyWithin(1, 4, 7)
// ['a', 'e', 'f','g', 'e', 'f', 'g', 'h']

Copy to position 1 elements from index 4 to 7.


returns the last possible index of an item in an array.

const xmen = ['J.Madrox', 'Jubilee', 'J.Madrox', 'Wolverine', 'J.Madrox']
// 4


scans the array and returns the first element which satisfies the callback.

const number = [55, 65, 39, 44]
const multiple3 = number.find((item) => item % 3 === 0)
// 39

find Index

scans the array and returns the index of the first element which satisfies the callback.

const number = [55, 65, 39, 44]
const multiple3 = number.findIndex((item) => item % 3 === 0)
// 2

Breakout of loops

it isnโ€™t exactly trivial to stop a loop. In order to accomplish that, you need to mutate the array upon which the loop is happening, but you wouldnโ€™t want to mutate when dealing with immutable data (like with the functional methods: map, reduce, filter, flat, flatMap, ...).

Remember slice? Slice returns a subarray of the one itโ€™s passed. We do that before we start, this means loopโ€™s running on a shallow copy of the array.

To break out then, itโ€™s just about using .splice(). Splice removes or replace elements in an array.

const bigArray = new Array(100).fill(1)
const contentSum = bigArray.slice(0).reduce((acc, item, index, array) => {
if (index === 10) {
return index
}, 0)
// 10

What other methods would include in this list? Was there one or a few that you had never came across before? Let me know in the comments!!

If you liked this article, please share it with your network! I appreciate it a lot.