JavaScript Array.flatmap() Method
Array.flatMap() method was introduced in ECMA Script 2019 or ES10. This method is used to flatten the nested array.
Previously, we have learned the flat() method, which is also used to flatten the nested array, but there is a slight difference in both of the methods.
The Array.flaMap() method is a combination map() method and flat() method. This method first maps each element in an array using the mapping function, then flattens the array and results into a new array.
This method can be used to flatten the array of depth 1 only because it calls a map() function followed by a flat() function with a depth of 1.
Syntax
// Arrow function
flatMap((currentValue) => { ... } )
flatMap((currentValue, index) => { ... } )
flatMap((currentValue, index, array) => { ... } )
// Callback function
flatMap(callbackFn)
flatMap(callbackFn, thisArg)
// Inline callback function
flatMap(function callbackFn(currentValue) { ... })
flatMap(function callbackFn(currentValue, index) { ... })
flatMap(function callbackFn(currentValue, index, array){ ... })
flatMap(function callbackFn(currentValue, index, array) { ... }, thisArg)
Parameters
- callback - It is a function that produces an element of the new Array, taking three arguments:
- currentValue - The current element being processed in the array.
- index (Optional) - The index of the current element being processed in the array.
- array (Optional) - The array map was called upon.
- thisArg (Optional) - Value to use as this when executing callback.
Return Value
Returns a new array with each element is the result of the callback function and flattened to a depth of 1.
Example 1
In the given example, we have mapped the elements of an array using the flatMap() method.
<!DOCTYPE html>
<html>
<head>
<title>flatMap()</title>
</head>
<body>
<script type="text/javascript">
const names = ['Study', 'Tonight'];
const result = names.flatMap((name, index) => [name, index]);
console.log(result);
</script>
</body>
</html>
Output
Example: Filtering array elements using flatMap() method
In the given example, we have created a nested array named numbers.
First, we have flattened the array using the flat() method, then we have removed the negative numbers from the array using flatMap(). method.
<!DOCTYPE html>
<html>
<head>
<title>flatMap()</title>
</head>
<body>
<script type="text/javascript">
const numbers = [1, [3, 6,], [2, -3, 7, ], [-4,], 5, 8, 9];
console.log(numbers.flat(3));
const result = numbers.flatMap(number => {
return number < 0 ? [] : [number];
});
console.log(result);
</script>
</body>
</html>
Output
As we can see in the output, there are two arrays. the first array is the flatted array which we have got using flat().
The second array is the filtered array in which we have filtered the negative numbers using the flatMap() method.
Conclusion
The flatMap() method was introduced by the ECMAScript 2019, also known as ES 10. This method consists of the properties map() method and flat() method. This method first maps each element within the array, then flattens it and results in a new array.
