ES2019 introduced two new methods to the Array prototype:
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
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
const flatten = require('lodash.flatten') const animals = ['Dog', ['Sheep', 'Wolf']] flatten(animals) //['Dog', 'Sheep', 'Wolf']
Let's now talk about the native
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' ]
map() method of an array, you know that using it you can execute a function on every element of an array.
flatMap() is a new Array prototype method that combines
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' ]