ES2019 introduced two new methods on Arrays: `flat` and `flatMap`.

### flat

The `flat` method creates a new array with all the sub-arrays concatenated or flattened. It performs this operation recursively to the specified depth.

``````const arr = [0, 1, 2, [3, 4], [5, [6, 7]]];
console.log(arr.flat()); // [ 0, 1, 2, 3, 4, 5, [ 6, 7 ] ]
``````

Well, it’s still not flat! I can see that `[6, 7]` exist in the resulting array. This is where the depth property comes in. If no depth is specified, `flat` goes one level deep.

``````const arr = [0, 1, 2, [3, 4], [5, [6, 7]]];
console.log(arr.flat(2)); // [ 0, 1, 2, 3, 4, 5, 6, 7 ]
``````

`flat` will also help you to flatten arrays with “holes”.

``````const arr = [1, 2, , 4, 5, , 7];
arr5.flat(); // [1, 2, 4, 5, 7]
``````

🚨 Use arrays having empty indices with caution, not all browsers support them.

### flatMap

`flatMap` is a combination of `map` and `flat` (as the name suggests). `flatMap` takes every element of an iterable and runs it through a mapping function. Then it flattens the result into a new array.

It takes two arguments:

• a callback and
• `this` context

The callback can be passed three parameters:

• current element being processed
• index and
• array

The callback function with the current element being processed is required. Everything else is optional.

``````const arr = [1, 3, 5].flatMap(x => [x, x + 1]);
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]
``````

What is happening in the above example?

• We take an input array with 1, 3, 5 as elements
• For each value, we run a mapping function that returns an array of the value and the value incremented by 1
• Example, for value 1 we get an array of 1 and 2
• Once we have three arrays for three elements, `flatMap` flattens it
• We get the final array

Hope the short blog post helped you understand the concept of `flat` and `flatMap`.

Happy coding 👋🏼