flatMap() methods are array functions introduced in ECMAScript 2019 (ES10) for working with nested arrays. Both methods are used to flatten an array or transform and flatten it simultaneously. Here’s an explanation of each method:
flat()method creates a new array that is a flattened version of the original array, up to the specified depth. It recursively flattens nested arrays to the specified depth. If no depth is provided, it defaults to 1.Here’s an example to illustrate the usage of
const nestedArray = [1, 2, [3, 4, [5, 6]]]; const flattenedArray = nestedArray.flat(); console.log(flattenedArray); // Output: [1, 2, 3, 4, [5, 6]] const deeplyFlattenedArray = nestedArray.flat(2); console.log(deeplyFlattenedArray); // Output: [1, 2, 3, 4, 5, 6]
In the first example,
flat()with no arguments flattens the array by one level. The nested array
[3, 4, [5, 6]]is still present in the resulting array.
In the second example,
flat(2)flattens the array to a depth of 2, resulting in a completely flattened array with no nested arrays remaining.
flatMap()method applies a provided callback function to each element of the array and then flattens the result into a new array. It combines the steps of
flat()into a single method.Here’s an example to illustrate the usage of
const array = [1, 2, 3]; const doubledAndFlattened = array.flatMap((num) => [num * 2]); console.log(doubledAndFlattened); // Output: [2, 4, 6]
In the example, the callback function
(num) => [num * 2]multiplies each element of the array by 2 and returns a new array. The resulting arrays are then automatically flattened into a single array.
flatMap() provide convenient ways to work with nested arrays and simplify common operations such as flattening or transforming array elements.