flat() flattens nested arrays into a single-level array, up to a configurable depth. It replaced verbose recursive flattening utilities that were previously copy-pasted between projects.
1Array.prototype.flat() | JavaScript Tutorial - In-Depth Guide Part 1
flat() flattens one level of array nesting by default, pulling nested array elements up into the parent array.
[1, [2, 3], [4, [5, 6]]].flat();
// [1, 2, 3, 4, [5, 6]] — only one level flattenedOne Level by Default
2Array.prototype.flat() | JavaScript Tutorial - In-Depth Guide Part 2
Pass a numeric depth argument to flatten multiple levels at once.
[1, [2, [3, [4]]]].flat(2);
// [1, 2, 3, [4]] — two levels flattenedCustom Depth
3Array.prototype.flat() | JavaScript Tutorial - In-Depth Guide Part 3
Passing 'Infinity' as the depth flattens arrays of any nesting level completely, no matter how deep.
const deeplyNested = [1, [2, [3, [4, [5]]]]];
deeplyNested.flat(Infinity);
// [1, 2, 3, 4, 5]Full Flatten with Infinity
4Array.prototype.flat() | JavaScript Tutorial - In-Depth Guide Part 4
flat() also removes empty slots from sparse arrays as a side effect of flattening.
[1, , 3].flat(); // [1, 3] — the hole is removedRemoves Sparse Holes
5Array.prototype.flat() | JavaScript Tutorial - In-Depth Guide Part 5
Not all nested data should be flattened — flatten only when the nesting was purely structural, not meaningful (like grouped categories you still need to distinguish).
// Don't flatten if grouping matters:
const resultsByPage = [[a, b], [c, d]]; // keep structured
// Do flatten if nesting is incidental:
const allIds = nestedIdArrays.flat();When Not to Flatten
6Step-by-Step Breakdown
flat() flattens one level of array nesting by default, pulling nested array elements up into the parent array.
Checkpoint: Does .flat() with no arguments flatten arrays nested more than one level deep?
- →Yes, it always fully flattens
- →No, only one level is flattened by default
Pass a numeric depth argument to flatten multiple levels at once.
Passing 'Infinity' as the depth flattens arrays of any nesting level completely, no matter how deep.
Checkpoint: What depth argument fully flattens an array of unknown nesting depth?
- →Infinity
- →0
flat() also removes empty slots from sparse arrays as a side effect of flattening.
Not all nested data should be flattened — flatten only when the nesting was purely structural, not meaningful (like grouped categories you still need to distinguish).
Next, we'll explore 'The flatMap() Method'.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Preserve Grouping When Flattening Would Break Accessible List Structure
If nested arrays represent sections that should render as separate accessible groups (each with its own heading), avoid flat() and instead render each sub-array as its own labeled group so screen reader users retain that structural context.
SEO Implications
- 1
No Direct SEO Effect
flat() is a data-shaping utility; SEO relevance is limited to correctness of any content lists built from flattened data.
Best Practices
Use flat(Infinity) for Unknown or Variable Nesting Depths
Hardcoding a specific depth breaks silently if the actual nesting ever goes one level deeper than expected; Infinity guarantees a fully flat result regardless.
Prefer flat() Over a Hand-Written Recursive Flatten Utility
It is native, well-tested, and communicates intent instantly to any reader familiar with the standard array methods, replacing a small utility function every codebase used to write for itself.
Frequent Bugs
Assuming `.flat()` with no arguments fully flattens an arbitrarily nested structure, then finding deeper levels still nested in the output.
Pass an explicit depth, or use flat(Infinity) if the nesting depth is unknown or can vary.
Flattening data whose nested structure carried meaningful grouping information (like results-per-page), destroying the ability to tell which items belonged to which group.
Only flatten when the nesting is purely incidental; if grouping matters, use flatMap() with index tracking or restructure the data instead of flattening it away.
Real-World Examples
Flattening Paginated API Results into a Single List
An app fetched several pages of search results in parallel, each returning its own array of items, and needed one combined flat list for display.
const allPages = await Promise.all(pageRequests);
const allItems = allPages.flat(); // combine into one flat array