JavaScript Array flatMap() Method

The flatMap() method transforms each element of an array using a mapping function and flattens the result into a new array. It applies the function to every element, avoiding empty ones, and preserves the original array.

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 doubles and squares each number in the array, creating a new flattened array, making complex transformations manageable.

const numbers = [1, 2, 3, 4];
const doubledAndSquared = 
    numbers.flatMap(num => [num * 2, num ** 2]);
console.log(doubledAndSquared);

[
  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.

const sentences = 
    ["Hello world", "How are you?", "JavaScript is fun"];
const words = 
    sentences.flatMap(sentence => sentence.split(' '));
console.log(words);

[ '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
• Edge 
• Firefox
• Opera
• Safari

JavaScript Array flatMap() Method- FAQs

What is the flatMap() method in JavaScript?

The flatMap() method in JavaScript first maps each element using a mapping function, then flattens the result into a new array. It is equivalent to performing a map() followed by a flat() of depth 1.

What happens if the array is empty when using flatMap()?

If the array is empty, the flatMap() method returns an empty array, as there are no elements to map or flatten.

Can the flatMap() method be used with non-array elements?

The flatMap() method can be used with any elements that can be transformed by the mapping function. The function can return any type, but to be useful in flattening, it should return arrays or array-like structures.

Can the flatMap() method be used with asynchronous functions?

The flatMap() method itself is not designed to handle asynchronous functions. For asynchronous operations, consider using Promise.all() combined with Array.prototype.flatMap().

What are some common use cases for the flatMap() method?

Common use cases for the flatMap() method include:

• Flattening nested arrays of results from a transformation function.
• Generating arrays of items based on a condition and concatenating them.
• Simplifying complex array manipulations by combining mapping and flattening in a single operation.

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.

K

Kanchan_Ray

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• javascript-array
• JavaScript-Methods