August 13, 2021

for…in vs for…of in JavaScript — Simple Explanation

✅ What is `for...in`?

for...in loops over keys (property names) in an object or array.

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key);        // a, b, c
  console.log(obj[key]);   // 1, 2, 3
}

const arr = ['x', 'y', 'z'];
for (let index in arr) {
  console.log(index);   // 0, 1, 2
  console.log(arr[index]); // x, y, z
}

🟡 Note: for...in gives index, not values for arrays.

for...of loops over values of iterable objects (like arrays, strings, maps, sets).

const arr = ['x', 'y', 'z'];
for (let value of arr) {
  console.log(value); // x, y, z
}

for (let char of 'hello') {
  console.log(char); // h, e, l, l, o
}

🟢 for...of is not for plain objects, unless you use Object.entries() or similar.

Feature	`for...in`	`for...of`
Iterates over	Property keys (names)	Property values
Works on objects	✅ Yes	❌ No (unless iterable)
Works on arrays	✅ Yes (indexes)	✅ Yes (values)
Output for array	Indexes: `0, 1, 2...`	Values: `'a', 'b', 'c'...`
Use case	Loop through object keys	Loop through values of array, string, map, set

You want to…	Use
Loop over object properties	`for...in`
Loop over array values	`for...of`
Loop over string characters	`for...of`
Loop over Map / Set values	`for...of`
Loop over array indexes manually	`for...in`

for...in can loop over inherited properties, so it’s best with hasOwnProperty(): jsCopyEditfor (let key in obj) { if (obj.hasOwnProperty(key)) { // safe to use } }
for...of only works on iterable objects.

for...in = loop over keys (property names)
for...of = loop over values

“for...in is for object keys, for...of is for iterable values like arrays or strings.”