The flatMap() array method in JavaScript

July 29, 2020 - 2 min read

The `flatMap()` is an array method and is used to do some operation before converting a multidimementional array into a single array.

Suppose we have an array of sentences like this,

``````// an array of sentences
let arr = [
"Hello, How are you?",
"Harry is a good man",
"Hey, John",
"I'm Fine",
];
``````

What if we want to split all the words by spaces?

We can do that using the `map()` and `split()` methods like this.

``````// an array of sentences
let arr = [
"Hello, How are you?",
"Harry is a good man",
"Hey, John",
"I'm Fine",
];

// loop through every elements using map
// and then split each array element by space
let newArr = arr.map((element) => {
return element.split(" ");
});

console.log(newArr);
``````

Now if we look into the array, we can see something like this,

``````[
["Hello,", "How", "are", "you?"],
["Harry", "is", "a", "good", "man"],
["Hey,", "John"],
["I'am", "Fine"]
]
``````

Here we have all the words in a nested array. But we never wanted our words to be in a nested array. The `split()` method inside the `map()` method always returns every element inside a nested array, That's a problem for us.

That's where the `flatMap()` method comes to help us.

The `flatMap()` method first maps through every element in an array and then converts every nested array elements into a single non-dimensional array.

Let's try what we did before with the `flatMap()` array method.

``````// an array of sentences
let arr = [
"Hello, How are you?",
"Harry is a good man",
"Hey, John",
"I'm Fine",
];

// flatMap() method first maps through every element
// and then converts nested array into single array
let newArr = arr.flatMap((element) => {
return element.split(" ");
});

console.log(newArr);
``````

This is the output,

``````// everything in a single array
[
"Hello,",
"How",
"are",
"you?",
"Harry",
"is",
"a",
"good",
"man",
"Hey,",
"John",
"I'am",
"Fine"
]
``````

The `flatMap()` method accepts a callback function and passes the current element which is getting looped.

This code is more elegant and readable than our previous code.

The `flatMap()` does the job of mapping through the array first and then converts a nested array into a single array.