What do flat and flatMap do? | Interview Question

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

01

Understand 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.

flatflatmap

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the 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 Matt

Solution ready — 2 min read

Classified // press E to declassify

04

Run the code

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

Practice

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.