{
    "slug": "js_array_flat_flatmap",
    "term": "Array.flat() & Array.flatMap()",
    "category": "javascript",
    "difficulty": "beginner",
    "short": "Array.flat(depth) flattens nested arrays; Array.flatMap() maps then flattens one level — more efficient than map().flat() and great for expanding items.",
    "long": "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).",
    "aliases": [],
    "tags": [
        "javascript",
        "arrays",
        "es2019",
        "functional"
    ],
    "misconception": "flatMap() flattens all levels — it only flattens one level. Use flat(Infinity) for deep flattening.",
    "why_it_matters": "flatMap() replaces the common but verbose reduce((acc, x) => [...acc, ...fn(x)], []) pattern with a clean, readable alternative.",
    "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."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_array_methods",
        "php_array_functions_fp",
        "js_spread_rest"
    ],
    "prerequisites": [
        "js_array_methods"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap"
    ],
    "bad_code": "// Verbose reduce-concat:\nconst tags = posts.reduce((acc, post) => acc.concat(post.tags), []);\n\n// Manual flat:\nconst nested = [[1,2],[3,4]];\nconst flat = [].concat(...nested);",
    "good_code": "const tags = posts.flatMap(post => post.tags);\n\n// Filter + transform in one pass:\nconst active = items.flatMap(item =>\n    item.active ? [{ ...item, label: item.name.toUpperCase() }] : []\n);\n\n// Deep flatten:\nconst deep = nested.flat(Infinity);",
    "quick_fix": "Replace reduce-concat patterns with flatMap(). Replace [].concat(...arr) with arr.flat(). Use flatMap(x => condition ? [x] : []) for filter+transform.",
    "severity": "info",
    "effort": "low",
    "created": "2026-03-23",
    "updated": "2026-03-23",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_array_flat_flatmap",
        "html_url": "https://codeclaritylab.com/glossary/js_array_flat_flatmap",
        "json_url": "https://codeclaritylab.com/glossary/js_array_flat_flatmap.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Array.flat() & Array.flatMap()](https://codeclaritylab.com/glossary/js_array_flat_flatmap) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_array_flat_flatmap"
            }
        }
    }
}