This article is the seventh of the Array Method Series. In this article, I will explain the flatMap
Array method.
What is the FlatMap Method?
The flatMap
method of arrays is a higher-order function that applies a map
and a flat
on an array. That is, .map().flat()
.
An array map
method is used for for mapping items in an array, while an array flat method is used for flatting nested arrays within an array
The flatMap
method maps each item in an array and flattens the final array by one depth level.
This method does not modify the array.
Syntax of the Some Method
array.flatMap(function(item, index, array){
// do some things on the item
// return an array or item
})
// the final array will be flattened
// by 1 depth
The callbackFunction
passed to the flatMap
method is applied to each item in the array during the loop, and the final array after the loop is flattened by one depth level.
The arguments passed to the callback function in each loop are the item
, the index
of the item, and the original array
.
Before I show you how to use the flatMap
method, let me first show you how to achieve the function of this method by using a map
and a flat
.
Without the FlatMap Method
The flatMap
method is an abstracted function that maps through an array and flattens the result. Here's how to do without this method:
const array = [1, 2, 3, 4]
// the mapping
const newArray = array.map(item => {
return [item, item*2]
})
console.log(newArray)
// [ [ 1, 2 ], [ 2, 4 ], [ 3, 6 ], [ 4, 8 ] ]
// the flattening
const flattenedArray = newArray.flat()
console.log(flattenedArray)
// [1, 2, 2, 4, 3, 6, 4, 8]
This code is similar to what the flatMap
method does in the background. The map
method loops through each item and returns a value for the final array. The flat method loops through recursively and flattens the final array by one depth level.
With the FlatMap Method
Here's how you achieve the previous result with flatMap
:
const array = [1, 2, 3, 4]
const newArray = flatMap(item => {
return [item, item*2]
})
console.log(newArray)
// [1, 2, 2, 4, 3, 6, 4, 8]
More straightforward. The difference between the flat in flatMap
and the flat in flat
is that the former does not allow you to specify a depth, while the latter allows you to. flatMap
only does flattening for a depth of one level.
You may be wondering what the difference is between using a map and a flat (map().flat()
) and using flatMap
. Well, apart from the fact that flatMap
is lesser lines of code and is more concise, it is slightly more efficient than doing two loops (calling map
and flat
separately, according to MDN)
Top comments (1)
i tried to run this:
**_
> const newArray = flatMap(item => {
console.log(newArray)
but i got a reference error.
But i have solved the issue though, i installed lodash and modify the code to:
const newArray1 = _.flatMap(array, item => [item, item * 2]);
console.log(newArray1);