Blog

# Understanding Array.prototype.flatMap

Last week we talked about the new flat method available in ES2019.

This week, we’re going to dive into `flatMap`!

In JavaScript arrays a have a built-in function called `map`. It takes a function and uses that function to operate on each item in the array. Something like this.

``````let arr = [1, 2, 3]

let result = arr.map((item) => item * 2);
``````

`result` is then an array with each item from `arr` multiplied by two.

``````[2, 4, 6]
``````

# Another way to work with map

You can also use `map` to create a data structure inside each array element! Let’s look at this example.

``````let arr = [1, 2, 3]

let result = arr.map((item) => [item, item * 2]);
``````

In this case, our result is this.

``````[[1, 2],[2, 4],[3, 6]]
``````

It’s common to want to flatten this.

So you have

``````let arr = [1, 2, 3]

let result = arr.map((item) => [item, item * 2]).flat();

[1, 2, 2, 4, 3, 6]
``````

# But not with flatMap!

With the addition of `flatMap` this becomes simpler!

``````let arr = [1, 2, 3]

let result = arr.flatMap((item) => [item, item * 2]);

[1, 2, 2, 4, 3, 6]
``````

It’s the same thing.

# Important

The default argument for `flat` is 1, NOT Infinity. This is important because `flatMap` is the same way. Let’s look at an example.

``````let arr = [1, 2, 3]

let result = arr.flatMap((item) => [item, [item]]);

[ 1, , 2, , 3,  ]
``````

The array is not fully flattened because `flatMap` only flattens one level.

# Conclusion

flatMap is a great built-in function for this popular pattern! Check it out and let me know what you think.

Categories: Blog 25 Jun, 2019