# JS Tip of the Day: Filter and Map With flatMap

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-filter-and-map-with-flatmap/643109>\
**Category:** web dev\
**Created:** [April 27, 2020, 5:07pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-filter-and-map-with-flatmap/643109 "2020-04-27T17:07:37Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 27, 2020, 5:07pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-filter-and-map-with-flatmap/643109/1 "2020-04-27T17:07:37Z")

</div>

**Filter and Map With flatMap**  
Version: ES2019  
Level: Intermediate

When you want to create a new array with the transformed values of another array, you can use Array’s `map()`. Unfortunately (sometimes) `map()` will always create a new array of the same size as the original. If you want to omit some of the mapped values, for example, you can use `.filter()`, but this will have to be called after `map()`, going through all of the values a second time, creating another new array.

You can get around this using `flatMap()`. `flatMap()` is another version of `map()` that also flattens the result by one level, combining the values of the arrays in the mapped array with the mapped array itself. If a mapped value were to return an empty array, that would be equivalent to filtering the value out.

```javascript
let children = ['boy', 'girl', 'boy'];
let boyz2men = children.flatMap(child => {
    if (child === 'boy') {
        return 'man'; // mapped
    }
    return []; // filtered out
});
console.log(boyz2men); // ['man', 'man']

```

Given that mapped values can be arrays, and arrays can contain more than one value, you can also go beyond simple filtering (removing only) and instead also add values to the result making a mapped array that’s longer than the original.

```javascript
let children = ['boy', 'girl', 'boy'];
let adults = children.flatMap(child => {
    if (child === 'boy') {
        return 'man';
    }
    return ['woman', 'mother-in-law']; // 2 for 1
});
console.log(adults); // ['man', 'woman', 'mother-in-law', 'man']

```

`flatMap()` only flattens the first level of arrays, or the equivalent of `flat()` with a depth set to `1`. There is no way to have a greater depth with `flatMap()` alone. If you need to go deeper, you’ll want to call `flat()` separately after mapping normally.

More info:

- [flatMap() on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)