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

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

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-of
for-in

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

The solution is hidden so you can try first

5 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: for...in leaks a custom array property into its keys while for...of never sees it