What is the difference between for...of and for...in? | Interview Question

Q: What is the difference between for...of and for...in?

**Target Audience:** Engineers preparing for JavaScript fundamentals interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every loop's real output below was actually run in Node. ## 1. Why This Even Matters — A Story First Imagine a numbered coat-check rack (an array) that also has a sticky note taped to its SIDE reading "capacity: 50" — a piece of metadata about the rack itself, not one of the numbered coat slots. Someone counting only the actual coats (for...of) never even glances at that sticky note. Someone reading every single label on the rack, numbered slots AND the side note alike (for...in), reads the sticky note too — even though it was never meant to be counted as a "coat." ## 2. The Core Idea 📌 **Interview term:** `for...of` iterates the VALUES of an iterable. `for...in` iterates the ENUMERABLE KEYS of any object, including inherited ones — genuinely different m

01

Understand the problem

Question presented to candidate: "If I add a custom property directly onto an array, like myArray.total = 100, and then loop over the array with for...in, what actually shows up in the loop? Would for...of behave the same way?"

What a strong answer should cover:

📌 Interview term: for...of — iterates over the values of anything implementing the iterable protocol (arrays, strings, Maps, Sets, generators) — it works only on genuinely iterable things, and genuinely does NOT see non-index properties.
📌 Interview term: for...in — iterates over an object's enumerable property keys (as strings), including inherited enumerable properties from the prototype chain — it works on any object, not just iterables, and was never really designed for arrays specifically.
📌 Interview term: the real, direct answer to the prompt — verified directly: adding myArray.total = 100 and then using for...in genuinely includes "total" as one of the loop's keys, alongside the numeric index keys — a real, concrete bug source. for...of, verified directly on the identical array, genuinely does NOT include it at all — it only ever produces the array's real element values.
📌 Interview term: for...of on a non-iterable throws — verified directly: using for...of on a plain object (which does not implement the iterable protocol) genuinely throws a real TypeError, while for...in works on it fine.
A precise answer names the standard, real guidance this leads to: use for...of for arrays/iterables (to get real values, safely, without picking up stray properties), and reach for for...in only when inherited/enumerable KEYS on a plain object are specifically needed — with Object.keys()/Object.entries() as the more precise, own-properties-only alternative in most real cases.

Clarifying questions expected:

None — this is a definitional/comparison question; directly answering the prompt's own custom-property scenario with real proof is the strong signal.

Code / implementation expected: Yes — reproducing the prompt's exact scenario (a custom array property leaking into for...in) is the clearest, most convincing demonstration.

for-offor-in

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: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every loop's real output below was actually run in Node.

1. Why This Even Matters — A

Solution ready — 2 min read

Classified // press E to declassify

04

Run the code

JSReal proof: for...in leaks a custom array property into its keys while for...of never sees it

Practice

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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