# How to flatten an array in JavaScript

> Learn how to flatten a JavaScript array with the ES2019 flat() and flatMap() methods, including using flat(Infinity) to fully flatten nested arrays.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-12-10 | Topics: [JavaScript](https://flaviocopes.com/tags/js/) | Canonical: https://flaviocopes.com/javascript-flatten-array/

[ES2019](https://flaviocopes.com/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](https://caniuse.com/#feat=array-flat), and remember you can use [Babel](https://flaviocopes.com/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()`](https://lodash.com/docs/#flatten), [`flattenDeep()`](https://lodash.com/docs/#flattenDeep) and [`flattenDepth()`](https://lodash.com/docs/#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:

- [lodash.flatten](https://www.npmjs.com/package/lodash.flatten)
- [lodash.flattendeep](https://www.npmjs.com/package/lodash.flattendeep)
- [lodash.flattendepth](https://www.npmjs.com/package/lodash.flattendepth)

Here's how to flatten an array using `lodash.flatten`:

```js
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](https://flaviocopes.com/javascript/) methods now.

`flat()` is a new array instance method that can create a one-dimensional array from a multidimensional array.

Example:

```js
['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:

```js
['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](https://flaviocopes.com/javascript-map/).

`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:

```js
['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]

['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]
```