Features of JavaScript flatMap method ES10/2019
JavaScript 0 CommentsJavaScript flatMap method is basically a combination of map()
and flat()
method with the depth of 1, flatMap()
method first maps each element using a mapping function, then flattens the result into a new array. This method is quite useful, as merging both methods into one method is a little more efficient.
Also, read Guide to Flatten array in JavaScript
Syntax
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg])
Parameters
callback
:- Function that produces an element of the new Array, taking three arguments below:
First is currentValue
This is the current element that is being processed in the array.
Second is index
The index of the current element is being processed in the array and it is an optional argument.
Third is array
:- The array map
was called upon and this is an optional argument.
Fourth is thisArg
Value to use as this
when executing callback
and it is also an optional argument.
Return value of JavaScript flatMap
The return value is a new array with flattened and remembered that it flattens an array to the depth of 1.
Example
Here I’ll show you map()
and flatMap()
methods comparison
let arr = [1, 2, 3, 4]; arr.map(x => [x * 2]); // [[2], [4], [6], [8]]
The output of the above example is something like this[[2], [4], [6], [8]]
. Let’s see the same example with flatMap()
method below:
arr.flatMap(x => [x * 2]); // [2, 4, 6, 8]
Here is one more example of level 2 depth
arr.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]
The output of the above example is an array of array like this: [[2], [4], [6], [8]]
because JavaScript flatMap goes only to the depth of 1.
Well if you were paying attention then I know you have a question that why would I return an array in first place in map()
method? Because that map method was only an example to make you understand. Here is one more example below:
Example of Multiple Array
const animals = ['🐕', '🐈', '🐑', '🐮']; const noises = ['woof', 'meow', 'baa', 'mooo']; const mappedOnly = animals.map((animal, index) => [animal, noises[index]]); const mappedWithFlat = animals.flatMap((animal, index) => [animal, noises[index]]); console.log(mappedOnly); // [['🐕', 'woof'], ['🐈', 'meow'], ['🐑', 'baa'], ['🐮', 'mooo'] console.log(mappedWithFlat); // ['🐕', 'woof', '🐈', 'meow', '🐑', 'baa', '🐮', 'mooo']
I hope you understood now, In the above example we mapped and flatten two different arrays into one (animals and their noises) in a single statement using a single return statement of arrow function to read more about An Advanced Guide Of Arrow Function in JavaScript
Returning array
If the above function is complicated for you, I’ll give you one more example. Let’s say if the return value is also an array
const friends = [ {name: 'Dave', kids: ['Max', 'Jack']}, {name: 'Max', kids: ['Sam', 'Alex', 'Megan']}, {name: 'Jordan', kids: ['Mason', 'Cameron', 'Kaylin']} ]; const kidNames = friends.flatMap(ele => ele.kids); // ["Max", "Jack", "Sam", "Alex", "Megan", "Mason", "Cameron", "Kaylin"]
In the above example we have an array called friends
, we mapped its property called kids
that is also an array and flatten at the same time using flatMap()
. The output of the above example is: ["Max", "Jack", "Sam", "Alex", "Megan", "Mason", "Cameron", "Kaylin"]
Modifying items.
Yes, we can also modify items as we want during the mapping using flatMap()
method. For example:
Let’s say we want to remove all the negative numbers and split the odd numbers into an even number
let a = [5, 4, -3, 20, 17, -33, -4, 18] a.flatMap( (n) => (n < 0) ? [] : (n % 2 == 0) ? [n] : [n-1, 1] ) // expected output: [4, 1, 4, 20, 16, 1, 18]
Output of above example: [4, 1, 4, 20, 16, 1, 18]
Using flatMap()
is very useful and short but it all depends on you and your creativity. 🙂
Hers is an emotion for you:

Thank you for reading and support. Please share it with love.