Features of JavaScript flatMap method ES10/2019

JavaScript 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 currentValueThis 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"]

Chrome Official docs

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.