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

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

→ Here's my latest YouTube video

→ Get my JavaScript Beginner's Handbook

→ 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

Bootcamp 2025

Join the waiting list