How to flatten an array in JavaScript
A practical guide to flattening JavaScript arrays
ES2019 introduced two new methods to the Array prototype: flat
and flatMap
. They are both very useful to what we want to do: flatten an array.
Let’s see how they work.
But first, a word of warning: only Firefox 62+, Chrome 69+, Edge 76+ and Safari 12+ do already support those 2 methods, as they are fairly recent. Check the current browser support, and remember you can use Babel to backport your code to a previous ES version, if you need to support older browsers.
If you don’t want to deal with Babel, and you don’t have a build step already, it might make more sense to use the flatten()
, flattenDeep()
and flattenDepth()
functions provided by Lodash.
The cool thing about Lodash is that you don’t need to import the whole library. You can use those functions individually using those packages:
Here’s how to flatten an array using lodash.flatten
:
const flatten = require('lodash.flatten')
const animals = ['Dog', ['Sheep', 'Wolf']]
flatten(animals)
//['Dog', 'Sheep', 'Wolf']
Let’s now talk about the native flat()
and flatMap()
JavaScript methods now.
flat()
is a new array instance method that can create a one-dimensional array from a multidimensional array.
Example:
['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]
By default it only “flats” up to one level.
You can add a parameter to flat()
to set the number of levels you want to flat the array to.
Set it to Infinity
to have unlimited levels:
['Dog', ['Sheep', ['Wolf']]].flat()
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]
['Dog', ['Sheep', ['Wolf']]].flat(2)
//[ 'Dog', 'Sheep', 'Wolf' ]
['Dog', ['Sheep', ['Wolf']]].flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]
If you are familiar with the JavaScript map()
method of an array, you know that using it you can execute a function on every element of an array.
If not, check my JavaScript map() tutorial.
flatMap()
is a new Array prototype method that combines flat()
with map()
. It’s useful when calling a function that returns an array in the map()
callback, but you want your resulted array to be flat:
['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]
['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025