Skip to content

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']]

//['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.


['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' ]
→ Download my free JavaScript Handbook!



You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about js: