Picture of the author

Amit Khonde

What is flatMap in JavaScript? And how made my code cleaner

Have you ever looked at a JavaScript in built function and said to yourself:

I understand what this is but I do not know where I can use this.

Well, this exact thought came to mind when I read about Array.flatMap(). So I started looking for its applications in my day-to-day coding and viola!! I found a use case. In this post, we will first see what Array.flatmap() is and then look at how I used it in a real problem.

What exactly is Array.flatMap?

FlatMap is a mix of two words which are derived from latin words blah blah blah...

Just kidding.

Array.flatMap is a mixture of two array methods Array.flat and Array.map. Individually,

  • Array.flat is used for flattening nested arrays. For example
1 2 3 4 const names = ['Amit', 'Karishma', 'Kunal', ['Pankaj', 'Rahee']]; console.log(names.flat()); // expected output: ["Amit", "Karishma", "Kunal", "Pankaj", "Rahee"]
  • Array.map is used for creating a new array by performing operations on each array element and returning a value. For example
1 2 3 4 5 6 7 const names = ['Amit', 'Karishma', 'Kunal', 'Pankaj', 'Rahee']; const everyOneLovesDogs = names.map((name) => { return `${name} loves dogs`; }); console.log(everyOneLovesDogs); // expected output: ["Amit loves dogs", "Karishma loves dogs", "Kunal loves dogs", "Pankaj loves dogs", "Rahee loves dogs"]

So as you can guess, Array.flatMap maps an array and then flattens the nested arrays in the returned array. A quick example of flatMap looks like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 const usersWithInterests = [ { name: 'Amit', interests: ['Cricket', 'Music'], }, { name: 'Karishma', interests: ['Drawing', 'Reading'], }, { name: 'Pranav', interests: ['Crafting', 'Biking'], } ]; const interests = usersWithInterests.flatMap((user) => { return user.interests; }); console.log(interests); // Expected Output: ["Cricket", "Music", "Drawing", "Reading", "Crafting", "Biking"]

How I used Array.flatMap in a real-world problem?

I was working on a feature where I had to create a dropdown for categories for products. The actual response from getProducts API looks like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 const response = { "status": "success", "products": [ { "name": 'One Plus 7T', "categories": ['Technology', 'Mobile', 'SmartPhone'], "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', "rating": '4.5' }, { "name": 'MacBook Pro 2018', "categories": ['Technology', 'Computer', 'Laptop'], "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', "rating": '4.8' }, { "name": 'LG Monitor 221G', "categories": ['Technology', 'Monitor'], "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', "rating": '4.3' } ] }

The product object has categories as a key for which the values are stored in the array.

So I had to do 3 things

  • Get the categories from each product
  • Flatten that array
  • Get unique values from the array.

Instead of using 2 separate functions for first two tasks, i used one function: Array.flatmap. And then applied the set operation on that array to get unique values.

The final code snippet looked something like this:

1 2 3 4 5 6 7 8 9 const { products } = response; const allCategories = products.flatMap((product) => { return product.categories; }); const uniqueCategories = [...new Set(allCategories)]; console.log(uniqueCategories); // Expected Output: ["Technology", "Mobile", "SmartPhone", "Computer", "Laptop", "Monitor"]

Conclusion

I hope now you folks can also apply Array.flatMap in cases where they fit and produce a cleaner code. For more such interesting tidbits, stay tuned in. Until then, Happy Coding!!

Share

Share on twitter
Share on facebook

Like what you are reading? Subscribe for new posts every week