JavaScript Array flatMap() Method

JavaScript Array flatMap() method is used to both flatten and map elements of an array. It works by applying a provided function to each element of the array and then flattening the result into a new array.

This method is used in JavaScript to both map over the elements of an array and flatten the result into a new array. This is particularly handy when you want to perform a mapping operation that might return arrays for each element, and you want the final result to be a single flattened array.

Example:

const words = ["Hello", "world", "how", "are", "you"];  
const result = words.flatMap(word => word.split('')); 
console.log(result); // Output: ["H", "e", "l", "l", "o", "w", "o", "r", "l", "d", "h", "o", "w", "a", "r", "e", "y", "o", "u"]

Syntax:

let A = array.flatMap(function callback(current_value, index, Array)) {
// It returns the new array's elements.
}

Parameters:

• current_value: It is the input array element.
• index:
  • It is optional.
  • It is the index of the input element.
• Array:
  • It is optional.
  • It is used when an array map is called.

Return Values: It returns a new array whose elements are the return value of the callback function.

Example 1: In this example, the flatMap() method is utilized to perform a dual operation on an array of numbers. Each number is both doubled and squared using a callback function, resulting in a new array. The flatMap() function ensures that the individual arrays produced for each number are flattened into a single array, producing the final array with doubled and squared values.

javascript

const numbers = [1, 2, 3, 4];

const doubledAndSquared = numbers.flatMap(num => [num * 2, num ** 2]);

console.log(doubledAndSquared);

Output

[
  2, 1, 4,  4,
  6, 9, 8, 16
]

Example 2: In this example, the flatMap() method is employed to process an array of sentences. The callback function, sentence => sentence.split(' '), is applied to each sentence, splitting it into an array of words. The flatMap() method then flattens these arrays into a single-dimensional array of words.

javascript

const sentences = ["Hello world", "How are you?", "JavaScript is fun"];

const words = sentences.flatMap(sentence => sentence.split(' '));

console.log(words);

Output

[ 'Hello', 'world', 'How', 'are', 'you?', 'JavaScript', 'is', 'fun' ]

We have a complete list of Javascript Array methods, to check those please go through this Javascript Array Complete reference article.

Supported Browser:

• Google Chrome 69 and above
• Edge 79 and above
• Firefox 62 and above
• Opera 56 and above
• Safari 12 and above

Note: This method is available in Firefox Nighty only.

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.