YouTipExample
\nMap each element using a mapping function, then flatten the result into a new array:
\nconst arr1 = [1, 2, , [4, 5], 6, []]; const flattened = arr1.flatMap(num =>num); document.getElementById("demo").innerHTML = flattened;\n\n
Definition and Usage
\nThe flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is almost identical to calling map followed by flat with a depth of 1, but flatMap is generally slightly more efficient when merged into a single method.
\nThe flatMap() method returns a new array, where each element is the result of the callback function, and the structural depth value is 1.
\n\n\n\n
Browser Support
\nThe numbers in the table indicate the first browser version that fully supports this method.
\n| Method | \n\n | \n | \n | \n | \n |
|---|---|---|---|---|---|
| flatMap() | \n45.0 | \n12.0 | \n32.0 | \n9 | \n25.0 | \n
\n\n
Syntax
\n// Arrow Function flatMap((currentValue) => { /* … */ } ) flatMap((currentValue, index) => { /* … */ } ) flatMap((currentValue, index, array) => { /* … */ } )// Callback Function flatMap(callbackFn) flatMap(callbackFn, thisArg)// Inline Callback Function flatMap(function(currentValue) { /* … */ }) flatMap(function(currentValue, index) { /* … */ }) flatMap(function(currentValue, index, array){ /* … */ }) flatMap(function(currentValue, index, array) { /* … */ }, thisArg)Parameters
\nParameter | Description
\ncallback: A function that creates an element to be placed in the new array. It can take three arguments:
\ncurrentValue: 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 on which map was called.
thisArg (Optional): The this value to use when executing the callback function.
Technical Details
\nReturn Value: An array.
\nJavaScript Version: ECMAScript 6
\n\n
More Examples
\nmap() vs flatMap()
\n\nExample
\nvar arr1 =[1,2,3,4];\n\narr1.map(x =>[x *2]);\n\n// [, , , ]\n\narr1.flatMap(x =>[x *2]);\n\n// [2, 4, 6, 8]\n\n// only one level is flattened\n\n arr1.flatMap(x =>[[x *2]]);\n\n// [, , , ]Although the code above seems to work with both map and flatMap, this only demonstrates how to use flatMap.
\nTherefore, to better demonstrate the utility of flatMap, we will split an array containing phrases into a new array of individual words.
\n\nExample
\nlet arr1 =["it's Sunny in","","California"];\n\narr1.map(x => x.split(" "));\n\n// [["it's","Sunny","in"],,]\n\narr1.flatMap(x => x.split(" "));\n\n// ["it's","Sunny","in", "", "California"]Note that the length of the output list can differ from the length of the input list.
\n\nAdding or Removing Items During a map()
\nflatMap can be used to add or remove items during a map operation (i.e., modifying the number of items). In other words, it allows you to iterate over many items and transform them into other items (by placing them individually), rather than always maintaining a one-to-one relationship. In this sense, its function is similar to the opposite of filter. Simply return a 1-item array to keep the item, return a multi-element array to add items, or return a 0-item array to remove the item.
\n\nExample
\n// Let's say we want to remove all the negative numbers and split the odd numbers into an even number and a 1\n\n let a =[5,4,-3,20,17,-33,-4,18]\n\n// | x | | x x |\n// [4,1, 4, 20, 16, 1, 18]\n\na.flatMap((n)=>\n\n(n <0)?[]:\n\n(n %2==0)?:\n\n[n-1,1]\n\n)\n\n// expected output: [4, 1, 4, 20, 16, 1, 18]Alternative Approach
\nreduce() vs concat()
\n\nExample
\nvar arr =[1,2,3,4];\n\narr.flatMap(x =>[x, x *2]);\n\n// is equivalent to\n\n arr.reduce((acc, x)=> acc.concat([x, x *2]),[]);\n\n// [1, 2, 2, 4, 3, 6, 4, 8]Please note that this is inefficient and should be avoided with large arrays: in each iteration, it creates a new temporary array that must be garbage collected, and it copies elements from the current accumulator array into a new array instead of adding new elements to the existing array.
\n\n\n\n