JavaScript

JavaScript Array.flatMap() method | Explained

JavaScript supports a wide range of array methods such as Array.forEach(), Array.flatMap(), Array.sort(), etc. These methods are used to achieve different objectives such as traversing, sorting, etc. The Array.flatMap() method is a relatively new addition to the Array object. It is a combination of two methods flat() and map(), so, firstly it runs the Map() method on the array and then the flat().

This post will present a profound understanding of the below-listed concepts regarding the Array.flatMap() method:

So, let’s begin!

What is Array.flatMap() in JavaScript

It is a predefined method in JavaScript that combines the abilities of two methods, i.e., map() and flat(). So, an array.flatMap() method firstly maps the array’s items using the map function, and afterward, it flats the given/input array into a new array.

Basic Syntax

There are multiple ways of using the array.flatMap() method in javascript e.g. using an arrow function, callback function, or inline callback function.

The below snippet will show the arrow function syntax for the flatMap() method:

flatMap((currentValue, index, array) => { //return element

} )

The below snippet will show the callback syntax for the flatMap() method:

flatMap(callbackFun, thisArg)

The following code snippet shows the syntax of flatMap() method with respect to inline callback function:

flatMap(function(currentValue, index, array) { //return element

}, thisArg)

The table below will provide a detailed understanding of the parameters of the flatMap() method:

Parameter Description
callback It produces the item for the newly created array, and it can hold any of the following parameters: currentValue, index, array, thisArg.
currentValue It represents the current array element.
index It is an optional parameter that shows the index of the array element (currently in process).
array It is an optional parameter and is used when the flatMap is called upon.
thisArg It is an optional parameter, and its value is utilized as ‘this’ while executing the callback function.

How Array.flatMap() Method Works in JavaScript

Let’s consider some examples for a profound understanding of the Array.flatMap() method.

Example1

The below snippet will provide the basic understanding of the flatMap() method:

<script>

var array=[12, 24, 9, 81, 27];

document.write(array.flatMap(num=>[[num/3]]));

</script>

In this example, we performed the following task:

  • Created an array.
  • Utilized the array.flatMap() method to perform Mapping and flatting.
  • Consequently, the array.flatmap() will return a new array where each element is a result of the callback function(each element will be divided with 3):

The output shows the appropriateness of the Array.flatMap() method.

Example2

In this example we will create two arrays and afterwards, we will use the flatMap() method to get a new array:

<script>

var array=['Joe', 'Mike', 'John', 'Seth', 'Bryn'];

var array1=[1, 2, 3, 4, 5];

document.write("The flattened Array: <br>");

var newArray=array.flatMap((array,index)=>[array,array1[index]]);

document.write("<br>"+ newArray);

</script>

The flattened Array will display the employee’s name with their respective ID’s:

This is how we can use the Array.flatMap() method in JavaScript.

Conclusion

Array.flatMap() is a predefined method in JavaScript that combines the abilities of two methods, i.e., map() and flat(). So, an array.flatMap() method firstly maps the array’s items using the map function, and afterward, it flats the given/input array into a new array. This write-up explained what Array.flatMap() is? What it returns? and how it works in JavaScript?

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.