## DEV Community is a community of 601,801 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

# JavaScript Array.flatMap()

Samantha Ming Originally published at samanthaming.com γ»3 min read

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! π

## Discussion (7)

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!

Samantha Ming

thank you for the catch!!! will fix it right now π±

Strange

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

Alan Ibarra

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

Samantha Ming