DEV Community

Cover image for What is flatMap in JavaScript? And how made my code cleaner
Amit Khonde
Amit Khonde

Posted on • Originally published at amitkhonde.com

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
const names = ['Amit', 'Karishma', 'Kunal', ['Pankaj', 'Rahee']];

console.log(names.flat());
// expected output: ["Amit", "Karishma", "Kunal", "Pankaj", "Rahee"]
Enter fullscreen mode Exit fullscreen mode
  • Array.map is used for creating a new array by performing operations on each array element and returning a value. For example
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"]
Enter fullscreen mode Exit fullscreen mode

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:

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"]
Enter fullscreen mode Exit fullscreen mode

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:

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'
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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:

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"]
Enter fullscreen mode Exit fullscreen mode

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!!

This article was originally published here. For more such interesting reads, visit my blog.

Discussion (2)

Collapse
ranemihir profile image
Mihir Rane

I do use Array.map alot but didn't know about flatMap. Thanks, it was very helpful.

Collapse
patricspires profile image
Patric Pires

Thanks for sharing bro, I have the same problem here and it's a great way to solve it.