Syntax
arr.flat(depth)
arr.flatMap(item => [values])Examples
flat() - Flattening Nested Arrays
Flattening arrays to different depths.
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]] - only 1 level by default
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6] - 2 levels deep
console.log(nested.flat(Infinity)); // fully flattens any depthflatMap() - Map Then Flatten
A common use case: expanding each element into multiple elements.
const sentences = ["Hello world", "How are you"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words); // ["Hello", "world", "How", "are", "you"]
// Equivalent to, but more efficient than:
// sentences.map(s => s.split(" ")).flat()Best practices
- Use flat() when you already have a nested array structure that needs flattening
- Use flatMap() instead of .map().flat() when your mapping function returns arrays - it is more efficient since it avoids creating an intermediate array
- Be cautious with flat(Infinity) on deeply nested or very large structures - consider whether the nesting itself should be avoided at the source
- Remember flat() and flatMap() both return new arrays and do not modify the original
At a glance
- Purpose
- Application logic and interaction
- File extension
- .js · .mjs
- Runs in
- Browsers and JavaScript runtimes
- Usually used with
- HTML, CSS and Web APIs
Specifications & further reading
Related JavaScript documentation
Array Basics
Arrays are ordered, zero-indexed collections that can hold values of any type, including a mix of types. They can be created with array literal syntax [] or the Array constructor. The length property reflects the number of elements, and static methods like Array.isArray(), Array.from(), and Array.of() help create or check arrays.push(), pop(), shift(), unshift()
These four methods add or remove elements from the ends of an array, all mutating the original array in place. push() and pop() work on the end of the array (fast). shift() and unshift() work on the beginning (slower, since remaining elements must be re-indexed).slice() and splice()
slice() returns a shallow copy of a portion of an array as a new array, without modifying the original - useful for extracting a section. splice() modifies the original array in place by removing, replacing, or inserting elements at a specific position, and returns the removed elements.concat() and join()
concat() merges two or more arrays into a new array, without modifying the originals. join() converts all array elements into a single string, separated by a specified delimiter (comma by default) - the reverse operation of String.prototype.split().
Arrays are ordered, zero-indexed collections that can hold values of any type, including a mix of types. They can be created with array literal syntax [] or the Array constructor. The length property reflects the number of elements, and static methods like Array.isArray(), Array.from(), and Array.of() help create or check arrays.push(), pop(), shift(), unshift()
These four methods add or remove elements from the ends of an array, all mutating the original array in place. push() and pop() work on the end of the array (fast). shift() and unshift() work on the beginning (slower, since remaining elements must be re-indexed).slice() and splice()
slice() returns a shallow copy of a portion of an array as a new array, without modifying the original - useful for extracting a section. splice() modifies the original array in place by removing, replacing, or inserting elements at a specific position, and returns the removed elements.concat() and join()
concat() merges two or more arrays into a new array, without modifying the originals. join() converts all array elements into a single string, separated by a specified delimiter (comma by default) - the reverse operation of String.prototype.split().