Mastering JavaScript Array flatMap()

Reference

Introduction

JavaScript's flatMap() method combines two useful array functions, map() and flat(), into a single method. It allows you to both transform and flatten arrays in one go, making it incredibly efficient for certain use cases.

In this article, we will dive into how flatMap() works, examine real-world examples, and show you why it's a powerful tool for handling arrays.

How flatMap() Works

At its core, flatMap() applies a callback function to every element in the array, similar to map(). If the callback returns an array, flatMap() flattens it by one level, incorporating the individual elements into the resulting array.

Here’s the basic structure:

const arr = [1, 2, 3];
const result = arr.flatMap((el) => [el, el * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

In this example, flatMap() generates an array with both the original number and its double for each element.

Example 1: Remove Nested Arrays

flatMap() shines when you need to flatten a nested array in the result. Let’s look at transforming nested arrays into a simple, flat list.

const data = [
  ["apple", "banana"],
  ["pear", "plum"],
];

const result = data.flatMap((fruit) => fruit);
console.log(result); // ['apple', 'banana', 'pear', 'plum']

Without flatMap(), you would have had to call map() and flat() separately. Now, it's done in one step.

Example 2: Mapping and Filtering in One Go

One of the advantages of flatMap() is its ability to combine map() and filter() logic. If the callback function returns an empty array, flatMap() will skip that value entirely, acting like a filter.

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.flatMap((num) => (num % 2 !== 0 ? [num] : []));
console.log(oddNumbers); // [1, 3, 5]

In this case, flatMap() filters out the even numbers while mapping the odd numbers to the result array.

Example 3: Flatten and Transform Nested Objects

If you have an array of objects where each object contains another array, flatMap() is ideal for pulling out the values and flattening them into a single list.

const books = [
  { title: "JavaScript: The Good Parts", genres: ["tech", "programming"] },
  { title: "1984", genres: ["fiction", "dystopian"] },
];

const genres = books.flatMap((book) => book.genres);
console.log(genres); // ['tech', 'programming', 'fiction', 'dystopian']

Here, flatMap() extracts and flattens the genres arrays from each book object into one array.

Example 4: Avoiding Empty Entries in Result

If you want to transform an array but skip some values, you can return an empty array from your callback to prevent them from being included in the final result.

const words = ["hello", "", "world"];

const nonEmptyWords = words.flatMap((word) => (word ? [word] : []));
console.log(nonEmptyWords); // ['hello', 'world']

This is a clean way to filter out empty strings or invalid data while mapping.

Example 5: Removing Duplicates with flatMap()

Another handy use case is to remove duplicates after flattening an array of arrays. You can combine flatMap() with Set to achieve this:

const articles = [
  { title: "HTML Basics", tags: ["html", "css"] },
  { title: "CSS Grid", tags: ["css", "layout"] },
];

const uniqueTags = [...new Set(articles.flatMap((article) => article.tags))];
console.log(uniqueTags); // ['html', 'css', 'layout']

flatMap() extracts all the tags, and Set eliminates the duplicates in one line of code.

Conclusion

JavaScript's flatMap() method simplifies tasks that would traditionally require both map() and flat(). Whether you're transforming, filtering, or de-duplicating arrays, flatMap() is a powerful and versatile tool that can streamline your code. By leveraging flatMap(), you can handle more complex array operations with minimal effort.