Last week we talked about the new flat method available in ES2019.
This week, we're going to dive into flatMap
!
Let's start with map
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, [1], 2, [2], 3, [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.
Top comments (16)
Is there a way to pass
Infinity
intoflatmap()
? Or would you need to do aArray.flatMap(itme => item).flat(Infinity)
roundabout to get that effect? (I'm not even sure if this would be particularly useful in any scenario)Not that I've seen. I think the way to do it would be the second example you listed.
If I have more than one operations to do on an array, I subconsciously go to
reduce
everytime. It's better than remembering these separate functions I think. Not sure if it's the best option complexity-wise..I think it depends. The Mozilla docs actually mention that for large arrays that option isn’t as efficient.
developer.mozilla.org/en-US/docs/W...
Makes sense. Thanks for sharing!
Haha totally fair 😄 i was just trolling. Also, I need to learn what monads are.
I really hate the fact that libs like lodash are so much more useful than standard library and so happy that some of these features are making their way to standard library.
Hope they add mapValues/mapKeys/pickBy next. Having map/filter equivalents for objects is really convenient
Code school instructor here, I'd love to see a real-world example in your posts. The simple example is great for the intro, but having a more robust example to solidify might help. I am constantly getting that type of request from students, so I've gotten in the habit of trying to incorporate them during lecture.
That is to say, why are flat() and flatMap() being introduced? Why should a junior developer be excited about these?
Thanks : )
Fair point. Been keeping these intros bite-sized, but I'll certainly consider adding a bit more!
You had to go all monad? 😄
I have never really understood a use for this. I feel like it is useful, but I just cant find how!
It's a functional programming pattern for sure.
I love functional programming, its what I push for all my code to be where possible (I often work with other peoples code bases).
I just cant think of a situation where I have got an array that I both need to iterate over and flatten at the same time.
Seems like this has some good ones! 2ality.com/2017/04/flatmap.html
Isn't flatMap in ES6 (aka ES2015)?
Nope! New in ES2019. Map itself is ES2015.