DEV Community

Cover image for Array FlatMap
Suprabha
Suprabha

Posted on

Array FlatMap

FlatMap is a single method which can be usable for flat and map methods.

As you know flat(), flattening the 1-level deep and map() to loop into an array.

If we include both, we called flatMap() 😉

So, instead if calling two methods flat() and map(), you can use single method called flatMap().

let plants = ['💐', '🌲', '🌻', '🌹']; // ❌ map + flat plants.map(plant => [plant, '🍁']).flat(); // Output //["💐", "🍁", "🌲", "🍁", "🌻", "🍁", "🌹", "🍁"] // ✅ flatMap plants.flatMap(plant => [plant, "🍁"]) // Output // ["💐", "🍁", "🌲", "🍁", "🌻", "🍁", "🌹", "🍁"] 
Enter fullscreen mode Exit fullscreen mode

How flatMap() works?

📝 FlatMap() always do first map() and then it flat().

In flat(), we use to pass arguments where you set the depth, arguments define how deep a nested array should be flattened.

let plants = [[["🌻", "🌹"]]]; plants.flat(2); // ["🌻", "🌹"] 
Enter fullscreen mode Exit fullscreen mode

flatMap() do only 1 level deep flattening.

let plants = [[["🌻", "🌹"]]]; plants.flatMap(plant => [plant]); // [["🌻", "🌹"]] 
Enter fullscreen mode Exit fullscreen mode

Filter using flatMap 😉

Yes, You can also do filter here using flatMap().

let arr = [5, 4, -3, 20, -4, 18] arr.flatMap(i => { return i < 0 ? [] : [i]; }) // [5, 4, 20, 18] 
Enter fullscreen mode Exit fullscreen mode

Reference 🧐

Summary ∑

flatMap() method always helps if you want to use map and flat methods both together.

Thanks for reading the article ❤️

Buy Me A Coffee

🌟 Twitter 👩🏻‍💻 suprabha.me 🌟 Instagram

Top comments (1)

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Thank you!