As a continuation to our secret JavaScript Methods series, we’re going to talk about a controversial topic. This is a method that globe heads definitely don’t want you to see. That’s right, you guessed it, I’m talking about flatMap()
Theory.

The flatMap Theory 🌎

The flatMap() method, introduced in ES2019, isn't as well-known as its counterparts, but its potential is vast. It combines the functionalities of map() and flat() to transform and flatten arrays simultaneously.

const numArray = [1, 2, 3, 4];

const multipliedArray = numArray.flatMap((num) => [num * 2]);

console.log(multipliedArray); // Output: [2, 4, 6, 8]

The callback in flatMap() operates similar to map(), but it also flattens the resulting array by one level. If the callback returns an array, flatMap() assimilates its elements into the main array. The method performs this action recursively to flatten to a single depth.

MTV’s The Real World: FlatMap 🎭

Imagine handling data from various sources with varying structures and needing to merge and process them uniformly. Here's a scenario where flatMap() shines:

Let's say we have an array of user objects containing interests, but these interests are nested arrays due to data variability:

const users = [
  { name: 'Alice', interests: ['skiing', 'photography'] },
  { name: 'Bob', interests: ['gaming'] },
  { name: 'Charlie', interests: ['hiking', 'baking', 'skiing'] }
];

To create a unified list of all interests across users, we'd traditionally use map() followed by flat():

const allInterests = users.map(user => user.interests).flat();
console.log(allInterests); // Output: ['skiing', 'photography', 'gaming', 'hiking', 'baking', 'skiing']

However, with flatMap(), this becomes concise and elegant:

const allInterests = users.flatMap(user => user.interests);
console.log(allInterests); // Output: ['skiing', 'photography', 'gaming', 'hiking', 'baking', 'skiing']

The flatMap() method elegantly handles the extraction and flattening in a single sweep, simplifying complex data transformations.

Embracing flatMap() 🤗

As the globe spins on its axis, so too does the world of JavaScript, mastering versatile methods like flatMap() enhances our coding arsenal and helps us to write clean, concise, maintainable code for the future. Whether it's flattening arrays, transforming data structures, or streamlining complex data handling, flatMap() stands as a super useful method to keep in your back pocket.