Array.flat() & Array.flatMap()

TL;DR

Explanation

arr.flat() flattens one level by default. arr.flat(Infinity) flattens completely. arr.flat(2) flattens 2 levels. arr.flatMap(fn) is equivalent to arr.map(fn).flat(1) but more efficient. flatMap use cases: expanding one item into multiple (expanding tags into all tag instances), filtering and transforming (return [] to skip, return [item] or [a, b] to keep/expand). flat() replaces manual reduce-concat patterns. Both are ES2019 — use polyfills for IE11 (or Babel).

Common Misconception

Why It Matters

Common Mistakes

• Using flatMap() expecting deep flattening — only one level.
• Not knowing flat() without arguments flattens only 1 level.
• Using reduce + concat instead of flat()/flatMap() — verbose and slow.

Code Examples

// Verbose reduce-concat:
const tags = posts.reduce((acc, post) => acc.concat(post.tags), []);

// Manual flat:
const nested = [[1,2],[3,4]];
const flat = [].concat(...nested);

const tags = posts.flatMap(post => post.tags);

// Filter + transform in one pass:
const active = items.flatMap(item =>
    item.active ? [{ ...item, label: item.name.toUpperCase() }] : []
);

// Deep flatten:
const deep = nested.flat(Infinity);

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

Tags

Related Terms