For of vs For in in JavaScript: Key Differences and Usage

In JavaScript, for...in loops over the keys of an object or the indexes of an array as strings, while for...of loops over the values of iterable objects like arrays or strings. Use for...in for object properties and for...of for array or iterable values.

Quick Comparison

Here is a quick side-by-side comparison of for...in and for...of loops in JavaScript.

Feature	for...in	for...of
Purpose	Loops over keys (property names) of an object	Loops over values of iterable objects
Works on	Objects and arrays (keys/indexes as strings)	Arrays, strings, Maps, Sets, and other iterables
Loop variable	Property name (string)	Value of the iterable
Order	No guaranteed order for objects	Order of iterable elements
Use case	Enumerate object properties	Iterate array or iterable values
Includes inherited properties?	Yes, enumerable inherited properties	No, only own iterable values

Key Differences

The for...in loop is designed to iterate over all enumerable property names of an object, including those inherited through the prototype chain. When used on arrays, it loops over the indexes as strings, which can lead to unexpected results if the array has extra properties or the order matters.

In contrast, for...of works on iterable objects like arrays, strings, Maps, and Sets. It loops over the actual values in the iterable, preserving their order and ignoring keys or property names. This makes for...of ideal for processing array elements or string characters directly.

Another important difference is that for...in returns keys as strings, so you often need to convert them to numbers when working with arrays. Meanwhile, for...of returns the values directly, making the code cleaner and less error-prone for value iteration.

Code Comparison

Here is how you use for...in to loop over an array's indexes and access values:

javascript

const fruits = ['apple', 'banana', 'cherry'];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Output

0 apple
1 banana
2 cherry

for...of Equivalent

Here is the equivalent code using for...of to loop over the array values directly:

javascript

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}

Output

apple
banana
cherry

When to Use Which

Choose for...in when you need to loop over all enumerable property names of an object, including inherited ones. It is best for objects where keys matter more than values.

Choose for...of when you want to iterate over the actual values of an iterable like an array, string, or Map. It is cleaner and safer for value-based loops and preserves order.

In summary, use for...in for object keys and for...of for iterable values.

Key Takeaways

for...in loops over keys (property names) of objects, including inherited ones.

for...of loops over values of iterable objects like arrays and strings.

Use for...in for object property enumeration and for...of for array or iterable value iteration.

for...of preserves order and returns values directly, making it safer for arrays.

for...in returns keys as strings, which may require conversion when used with arrays.