Introduction

for...in and for...of look almost identical in JavaScript, but they answer different questions. for...in iterates property keys, while for...of iterates values from an iterable object, and confusing those two ideas is a common source of bugs.

What for...in Actually Does

for...in walks through enumerable property names on an object. The loop variable receives keys, not values.

1const user = {
2  id: 7,
3  name: "Ava",
4  active: true
5};
6
7for (const key in user) {
8  console.log(key, user[key]);
9}

This is useful when you are working with plain objects and you need dynamic key access.

What for...of Actually Does

for...of works with iterable values such as arrays, strings, maps, sets, generators, and other objects that implement the iteration protocol. The loop variable receives the values being iterated.

1const scores = [10, 20, 30];
2
3for (const value of scores) {
4  console.log(value);
5}

For arrays, this is usually the loop you want because it gives you elements directly.

Arrays Show the Difference Clearly

With arrays, for...in gives you indexes as strings, while for...of gives you the array values.

1const letters = ["a", "b", "c"];
2
3for (const index in letters) {
4  console.log("index:", index);
5}
6
7for (const value of letters) {
8  console.log("value:", value);
9}

That difference matters immediately if your loop body expects a value but receives "0" instead of "a".

Why for...in Is Risky on Arrays

Arrays are objects, so for...in can enumerate extra enumerable properties in addition to numeric indexes. That includes custom properties and, in bad codebases, inherited enumerable properties.

1const letters = ["a", "b", "c"];
2letters.extra = "surprise";
3
4for (const key in letters) {
5  console.log(key);
6}

This prints the array indexes and the extra property. That is why for...in is usually a poor choice for array iteration.

Objects Are Not Automatically Iterable

A plain object works with for...in, but not with for...of.

1const user = { id: 7, name: "Ava" };
2
3for (const key in user) {
4  console.log(key);
5}
6
7// for (const value of user) {
8//   console.log(value);
9// }

The commented block would throw because a plain object is not iterable by default. If you want object values with for...of, convert them first with Object.values, Object.keys, or Object.entries.

1const user = { id: 7, name: "Ava" };
2
3for (const [key, value] of Object.entries(user)) {
4  console.log(key, value);
5}

This is often the cleanest bridge between object data and for...of.

Strings, Maps, and Sets

for...of also works on many built-in iterables beyond arrays.

1for (const ch of "JS") {
2  console.log(ch);
3}
4
5const ids = new Set([1, 2, 3]);
6for (const id of ids) {
7  console.log(id);
8}

This is one reason for...of is such a useful general-purpose loop.

When to Use Each One

Use for...in when your task is about enumerable property names on an object. Use for...of when your task is about consuming values from something iterable.

If the data is an array and you want elements, use for...of.

If the data is a plain object and you want keys, for...in can work, though Object.keys plus for...of is often more explicit in modern code.

Common Pitfalls

The most common mistake is using for...in on arrays and then forgetting that the loop variable is an index key, not the element value.

Another issue is assuming for...of works on every object. It only works on iterables. Plain object literals do not qualify unless you convert them or define a custom iterator.

Developers also forget that for...in can include inherited enumerable properties. If you are enumerating object keys in a codebase you do not fully control, be careful about prototype surprises.

Finally, do not choose a loop form just because the syntax looks familiar. These two constructs are designed for different data models.

Summary

• 'for...in iterates enumerable property keys.'
• 'for...of iterates values from iterable objects.'
• On arrays, for...of is usually the correct choice.
• On plain objects, use for...in for keys or convert with Object.entries for for...of.
• Mixing the two leads to bugs around indexes, inherited properties, and non-iterable objects.