DEV Community

loading...

JavaScript Array.flatMap()

samanthaming profile image Samantha Ming Originally published at samanthaming.com ・3 min read

CodeTidbit by SamanthaMing.com

You learned how Array.flat() flattens an array in my previous tidbit. Now lets up the game and introduce "flatMap". It combines the steps of first mapping over the array with map() & then calling flat(). Instead of calling 2 methods, just use flatMap() πŸ‘

const foods = ['🍫', '🍦' ]


// ❌ map + flat
foods.map(food => [food, 'πŸ˜‹']).flat()


// βœ… flatMap
foods.flatMap(food => [food, 'πŸ˜‹'])


// Result
// ['🍫', 'πŸ˜‹', '🍦', 'πŸ˜‹']

How flatMap() works?

Let's go through step-by-step what flatMap() is doing. I was a bit confused when I first learned this one. Cause I thought it flattens and then it does the mapping. But no πŸ™…. It first map() and then it flat().

const names = ['jane', 'john' ];

// Step 1: map
const nestedArray = names.map((name, index) => [name, index]);
// [ ['jane', 1], ['john', 2 ] ]

So now we have a nested array. And we can use flat() to flatten the array.

const nestedArray =  [ ['jane', 1], ['john', 2 ] ]

nestedArray.flat();
// [ 'jane', 1, 'john', 2 ]

Of course, we can shorten this and just call flatMap(). Let's take a look πŸ‘€

const names = ['jane', 'john' ];

const result = names.flatMap((name, index) => [name, index]);

// [ 'jane', 1, 'john', 2 ]

And Voila! We have the same result πŸ‘

flatMap only flattens 1-level deep

With flat(), it accepts a parameter where you set the depth. What this means is you can specify how deep a nested array should be flattened.

const depth1 = [ [1], [2] ];
depth1.flat(); // same as depth.flat(1)
// [1, 2]

const depth2 = [ [[1, 2]] ];
depth2.flat(2);
// [1, 2]

Now for flatMap(), you can only go 1-level deep.

const names = ['jane'];

names.flatMap((name, index) => [ [name, index] ]);
//  [ ['jane', 1] ]

Let's break this into 2 steps, so you can see what's going on.

const names = ['jane'];

// Step 1: created a 2-level deep array
const twoLevelDeep = names.map((name, index) => [ [name, index] ]);
// [ [ ['jane', 1] ] ]

// Step 2: flat using depth 1
twoLevelDeep.flat();
//  [ ['jane', 1] ]

But if you do it separately, I can pass a depth parameter and flatten it completely:

twoLevelDeep.flat(2);
// [ 'jane', 0, 'john', 1 ]

So, if you want it to flatten beyond depth of 1. Then it is better to NOT use flatMap() and just call the methods separately πŸ‘

flatMap to filter item

One really cool you can do with flatMap is to remove an element. In this example, I want to remove all negative numbers.

const numbers = [1, 2, -3, -4, 5];

numbers.flatMap(number => {
  return number < 0 ? [] : [number]
})

// [ 1, 2, 5]

That's really cool! It's like acting like a filter. But how is this actually working. The secret is the empty array. Let's see what I mean.

const emptyNestedArray = [ [], 1 ];

emptyNestedArray.flat();
// [ 1 ]

When you try to flatten an element that's an empty array, it simply removes that item. So we can use that knowledge to make flatMap act kind of like filter method. Neat right! πŸ‘

Resources


Thanks for reading ❀
Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com

Discussion (7)

pic
Editor guide
Collapse
patrickradulian profile image
Patrick Radulian

Very nice summary!

You may want to correct one passage though:

// Step 1: created a 2-level deep array
const twoLevelDeep = names.flatMap((name, index) => [ [name, index] ]);
// [ [ ['jane', 1] ] ]

In this step, you actually use .map and not .flatMap

Cheers!

Collapse
samanthaming profile image
Samantha Ming Author

thank you for the catch!!! will fix it right now 😱

Collapse
abba_m_ profile image
Strange

hey dev! i love the awesome things you do across your social media accounts and i want to be like you someday:-)

Collapse
alanibalop profile image
Alan Ibarra

Nice post its good to know about flatMap to apply in some cases.

Collapse
samanthaming profile image
Samantha Ming Author

Awesome! Thanks for reading! Glad you found it helpful 😊

Collapse
ncpa0cpl profile image
ncpa0cpl

In example where you want to remove all negative numbers you should have number < 0 instead of number < 1. 0 is not a negative number but it would get removed.

Collapse
samanthaming profile image
Samantha Ming Author

ahhhh 😱 great catch...let me fix it now! thanks for letting me know