JavaScript Tutorials

JavaScript Array flatMap()
Syntax & Examples

Array.flatMap() method

The flatMap() method of the Array class in JavaScript returns a new array formed by applying a given callback function to each element of the calling array, and then flattening the result by one level.

Syntax of Array.flatMap()

There are 2 variations for the syntax of Array.flatMap() method. They are:

1.
flatMap(callbackFn)

Parameters

ParameterOptional/RequiredDescription
callbackFnrequiredA function to apply to each element in the array. It takes three arguments: element, index, and array.

This method returns a new array formed by applying a given callback function to each element of the calling array, and then flattening the result by one level.

Returns value of type Array.

2.
flatMap(callbackFn, thisArg)

Parameters

ParameterOptional/RequiredDescription
callbackFnrequiredA function to apply to each element in the array. It takes three arguments: element, index, and array.
thisArgoptionalA value to use as this when executing callbackFn.

This method returns a new array formed by applying a given callback function to each element of the calling array, and then flattening the result by one level, using thisArg as the value of this inside callbackFn.

Returns value of type Array.


✐ Examples

1 Using flatMap() method to double and flatten an array

In JavaScript, we can use the flatMap() method to double the values of an array and flatten the result by one level.

For example,

  1. We define an array variable arr with elements [1, 2, 3].
  2. We define a callback function double that doubles the value of each element and returns an array with the doubled value.
  3. We use the flatMap() method with double to create a new array with doubled values, flattened by one level.
  4. The result is stored in the variable doubledAndFlattened.
  5. We log doubledAndFlattened to the console using console.log() method to see the new array.

JavaScript Program

const arr = [1, 2, 3];
const double = element => [element * 2];
const doubledAndFlattened = arr.flatMap(double);
console.log(doubledAndFlattened);

Output

[2, 4, 6]

2 Using flatMap() method to map and flatten an array of strings

We can use the flatMap() method to map an array of strings to their lengths and flatten the result by one level.

For example,

  1. We define an array variable strArr with elements ['apple', 'banana', 'cherry'].
  2. We define a callback function getLength that returns an array with the length of each string.
  3. We use the flatMap() method with getLength to create a new array with the lengths of the strings, flattened by one level.
  4. The result is stored in the variable lengths.
  5. We log lengths to the console using console.log() method to see the new array.

JavaScript Program

const strArr = ['apple', 'banana', 'cherry'];
const getLength = element => [element.length];
const lengths = strArr.flatMap(getLength);
console.log(lengths);

Output

[5, 6, 6]

3 Using flatMap() method with a thisArg

We can use the flatMap() method with a thisArg to map and flatten an array using a specific context.

For example,

  1. We define an array variable arr with elements [1, 2, 3].
  2. We define an object context with a multiplier property set to 3.
  3. We define a callback function multiply that multiplies each element by the multiplier property of the context object and returns an array with the result.
  4. We use the flatMap() method with multiply and context as thisArg to create a new array with multiplied values, flattened by one level.
  5. The result is stored in the variable multipliedAndFlattened.
  6. We log multipliedAndFlattened to the console using console.log() method to see the new array.

JavaScript Program

const arr = [1, 2, 3];
const context = { multiplier: 3 };
function multiply(element) {
  return [element * this.multiplier];
}
const multipliedAndFlattened = arr.flatMap(multiply, context);
console.log(multipliedAndFlattened);

Output

[3, 6, 9]

Summary

In this JavaScript tutorial, we learned about flatMap() method of Array: the syntax and few working examples with output and detailed explanation for each example.