When should I choose `for...of` instead of `for...in`?
Quick answer
for...of is usually the right choice when you want to process an array’s values. for...in gives you enumerable property names, which for an array are index names and can include user-added properties. [S1] Choose based on whether your loop needs each value or each property key; the two loops do not produce the same kind of result.
The question, the details, the next step.
I have an array and want to do something with each item. Which loop should I use?
Use for...of when the work is about the items themselves. It iterates values supplied by an iterable, so it is a natural fit for visiting array values. [S1]
For example:
const colors = ["red", "green"];
for (const color of colors) {
console.log(color);
}This prints red, then green. The loop variable color is the current value, not the array position. That makes the code read directly as “for each color, do this.”
What would for...in give me with that same array?
for...in iterates enumerable property names. With an array, those include index names, rather than the values stored at those positions. [S1]
Using the same array:
const colors = ["red", "green"];
for (const key in colors) {
console.log(key);
}The output is 0, then 1. Those are property keys, not "red" and "green". If you need a value while looping this way, you would have to look it up, for example with colors[key]. But when your goal is simply to process each value, for...of expresses that goal more directly.
Is for...in always limited to those array indexes?
No. An array can also have user-defined enumerable properties, and for...in may visit those too. [S1] For example, under this explicit assumption, the array below has an extra enumerable property named note:
const colors = ["red", "green"];
colors.note = "example";
for (const key in colors) {
console.log(key);
}The keys can include 0, 1, and note. That means the loop is walking enumerable property names, not reliably expressing “each array item.” The example is illustrative; the exact properties you encounter depend on the object you are looping over. If you are processing array values, prefer for...of rather than relying on for...in to behave like an array-values loop.
Can you give me a quick way to decide between them when reading or writing code?
Ask what the loop body needs: a value, or a property key? Use for...of for values from an iterable, such as array items. Use for...in when your task specifically calls for enumerating an object’s property names. [S1]
A compact side-by-side check:
const colors = ["red", "green"];
for (const value of colors) console.log(value); // red, green
for (const key in colors) console.log(key); // 0, 1If your for...in loop body treats key as though it were already an item, pause and check whether you meant for...of. These examples establish what each loop produces for this array; they do not describe every possible object or every possible iterable.
A practical checklist
Name what the loop body needs: an item value or a property key.
For array values, choose
for...ofand use a value-named loop variable.For property names, choose
for...inand name the variablekeyorproperty.Check whether an array may have extra enumerable properties before using
for...in.Run a tiny example and inspect the loop output if you are unsure what the variable contains.
A few more useful answers
Does `for...in` give me numbers for array indexes?
It gives enumerable property names, including array index names; in the example they appear as 0 and 1, not as the array’s values. [S1]
Can I use `for...of` on something other than an array?
Yes, when the value supplies an iterable. for...of iterates values from an iterable; this guide’s examples focus on arrays. [S1]
Which loop should I use to get both an array index and its value?
Neither loop variable automatically gives you both in the examples shown: for...of gives values, while for...in gives property names. Choose based on what your task needs, and consult JavaScript documentation for an approach that provides both.
Sources
References used for this guide.
- [S1] Loops and iteration — JavaScript | MDN developer.mozilla.org · Checked