Array.prototype.flatMap
Returns a new array formed by applying a given callback function to each element of the array, then flattening the result by one level
Syntax
array.flatMap(callbackFn, thisArg?)Parameters
| Parameter | Type | Description |
|---|---|---|
| callbackFn | (element, index, array) => T | T[] | Function that produces an element of the new array |
| thisArg | any | Value to use as this when executing callbackFn |
Return Value
A new array with each element being the result of the callback, flattened by one level
Examples
const sentences = ['Hello world', 'Goodbye moon'];
const words = sentences.flatMap(s => s.split(' '));
console.log(words); // ['Hello', 'world', 'Goodbye', 'moon']const numbers = [1, 2, 3];
const result = numbers.flatMap(n => [n, n * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]const data = [{ values: [1, 2] }, { values: [3, 4] }];
const flat = data.flatMap(d => d.values);
console.log(flat); // [1, 2, 3, 4]Understanding Array.prototype.flatMap
The Array.prototype.flatMap method in JavaScript returns a new array formed by applying a given callback function to each element of the array, then flattening the result by one level. It belongs to the Array object and is one of the most widely used methods for working with array values in modern JavaScript and TypeScript applications.
The method signature is array.flatMap(callbackFn, thisArg?). It accepts 2 parameters: callbackFn, thisArg. When called, it returns a new array with each element being the result of the callback, flattened by one level. Understanding when and how to use flatMap() helps you write more expressive, readable code.
Common use cases for Array.prototype.flatMap include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like array-flat, array-map, array-filter, enabling you to chain operations together for complex data manipulation pipelines.
Browser support for Array.prototype.flatMap is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.
Browser Compatibility
Supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js. Part of the ECMAScript standard.
Related Methods
Array.prototype.flatCreates a new array with all sub-array elements concatenated into it recursively up to the specified depth
Array.prototype.mapCreates a new array populated with the results of calling a provided function on every element in the calling array
Array.prototype.filterCreates a shallow copy of a portion of a given array, filtered down to just the elements that pass the test implemented by the provided function
Array.prototype.reduceExecutes a user-supplied reducer callback function on each element of the array, passing in the return value from the calculation on the preceding element
More Array Methods
Other methods in the Array object
Related Tools
More Array Methods
Explore JavaScript Methods
Browse our complete reference of 410 JavaScript methods with syntax, examples, and explanations.