What do flat and flatMap do?

Q: What do flat and flatMap do?

**Target Audience:** Engineers preparing for JavaScript fundamentals interviews. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every depth and equivalence claim below was actually run in Node. ## 1. Why This Even Matters — A Story First Nested boxes inside boxes: `flat()` with no arguments is like opening exactly the OUTERMOST layer of boxes and pouring their contents onto the table — any box still sealed inside another box you just opened stays sealed. `flat(Infinity)` is opening every single box, no matter how deeply nested, until nothing but individual items remains. `flatMap` is doing something to each item first (like relabeling it) WHILE you open that one outer layer, in a single combined pass instead of two separate trips. ## 2. The Core Idea 📌 **Interview term:** `flat(depth)` concatenates nested sub-arrays up to `depth` levels (default 1). `flatMap(fn)` maps then flattens

The problem

Question presented to candidate: "If you call array.flat() with no arguments on a deeply nested array, how deep does it actually flatten? And is array.flatMap(fn) exactly the same as array.map(fn).flat(), or is there a real difference?"

What a strong answer should cover:

📌 Interview term: flat(depth) — returns a new array with sub-array elements concatenated up to the specified depth — the default depth is exactly 1, verified directly: a triple-nested array called with no arguments genuinely only flattens ONE level, leaving a deeper sub-array intact.
📌 Interview term: flat(Infinity) — verified directly: passing Infinity as the depth genuinely flattens arbitrarily deep nesting completely, regardless of how many levels exist.
📌 Interview term: the real, direct answer to the prompt's flatMap question — verified directly: arr.flatMap(fn) and arr.map(fn).flat() genuinely produce the identical result for the same input — the real, practical difference is that flatMap does it in a single pass, slightly more efficient than creating an intermediate mapped array first.
📌 Interview term: flatMap only flattens ONE level, always — verified directly: even when the mapped callback's return value is nested TWO levels deep, flatMap genuinely only flattens the first level, leaving the deeper nesting intact — unlike flat(), its depth is not configurable at all.
A precise answer names that flat() genuinely removes sparse array holes as a side effect of flattening — verified directly — a real, secondary behavior beyond just concatenating nested arrays.

Clarifying questions expected:

None — this is a definitional/comparison question; directly answering the prompt's default-depth and flatMap-equivalence questions with real proof is the strong signal.

Code / implementation expected: Yes — the direct depth comparisons (default, explicit depth, Infinity) plus the flatMap-vs-map-then-flat side-by-side are the clearest, most convincing demonstrations.

flat
flatmap

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript fundamentals interviews. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every depth and equivalence claim below was actually run in Node.

1. Why This Even Matters — A Story First

Nested boxes inside boxes: flat() with no arguments is like opening exactly the OUTERMOST layer of boxes and pouring their contents onto the table — any box still sealed inside another box you just opened stays sealed. flat(Infinity) is opening every single box, no matter how deeply nested, until nothing but individual items remains. flatMap is doing something to each item first (like relabeling it) WHILE you open that one outer layer, in a single combined pass instead of two separate trips.

2. The Core Idea

📌 Interview term: flat(depth) concatenat

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal proof: flat()'s default depth is exactly 1, flatMap equals map().flat() but in one pass, and flatMap always flattens exactly one level