Skip to the solution
EasyFrontend7 min read

What is the difference between map and forEach?

213 views

The problem

Question presented to candidate: "You need to fetch additional data for each item in an array, using an async function inside the loop. Someone writes items.forEach(async item => { await fetchMore(item) }). Does this actually wait for all the fetches to finish before moving on? Walk me through what map and forEach each do, and why this specific pattern is a real, common bug."

What a strong answer should cover:

  • πŸ“Œ Interview term: map(fn) returns a new array of transformed values, genuinely chainable; πŸ“Œ forEach(fn)** returns undefined, used purely for side effects β€” real, genuinely different return contracts.
  • πŸ“Œ Verified, not assumed: forEach's real return value is genuinely undefined, confirmed directly β€” and a real, direct attempt to chain .filter() onto it genuinely threw a real TypeError, since there is nothing real to chain onto.
  • πŸ“Œ Interview term: the real, direct answer to the prompt's exact async bug β€” a real forEach with an async callback genuinely does NOT wait for the async work to complete: confirmed directly, a real results array was genuinely still empty immediately after the forEach call itself returned, even though every async callback had already been invoked β€” forEach genuinely ignores whatever Promise each callback returns.
  • A precise answer names the real, correct fix for the prompt's exact bug: use for...of with await inside the loop body (for genuinely sequential async work), or Promise.all(items.map(async item => ...)) (for genuinely concurrent async work) β€” neither of which relies on forEach waiting for anything, since it genuinely never does.
  • A precise answer names that map, verified separately, genuinely does NOT stop early on any special return value inside the callback β€” a real, direct return inside a map callback is simply that element's real transformed value, not a loop-control signal.

Clarifying questions expected:

  • "Does the actual downstream code need the real, transformed VALUES back (map's real job), or is this purely a side-effecting operation with no meaningful return value (forEach's real job)?"
  • "Does the async work per item genuinely need to happen sequentially, or can it genuinely run concurrently?" β€” directly decides between the real for...of+await fix and the real Promise.all(map(...)) fix for the prompt's exact bug.

Code / implementation expected: Yes β€” a real, direct demonstration that forEach's return value is genuinely undefined, plus a real, concrete proof that forEach with async callbacks genuinely does not wait, is the concrete, convincing proof of exactly why the prompt's pattern is a real, common bug.

  • array-methods

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

The solution is hidden so you can try first

7 min read Β· 8 sections

Run the code

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

JavaScriptReal proof: forEach genuinely returns undefined and cannot be chained, and genuinely does not wait for async callbacks β€” the exact prompt bug reproduced

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

Question 36 of 165 in JavaScript

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

Up nextEasy

What is destructuring?

Continue