for.
for...of hands you the successive values of an iterable object, while for...in hands you the successive property names of an object as strings.
Side-by-side comparison
#What it hands you on every turn
Works on arrays
Works on plain objects
Properties inherited from the prototype
break, continue, await
Typical use
Example
#const tasks = ['Lesson 1', 'Lesson 2', 'Lesson 3']
for (const index in tasks) {
console.log(typeof index, index)
}
for (const task of tasks) {
console.log(task)
}Definition and usage
#Both loops hand you something different on every turn. for...of works on iterable objects, such as arrays, strings, Map, and Set, and returns the next value. for...in works on plain objects and returns the next property name (key) as a string, and you read the value itself separately, through object[key].
On an array for...in technically works too, but it returns the indexes as strings ("0", "1") and, besides them, may also pick up extra enumerable properties, including ones inherited from the prototype. for...of doesn’t have that problem, because it iterates over the values themselves, and it also supports break, continue, and await inside it, which for...in doesn’t fully support.
The rule is simple: use for...of for arrays, strings, and other iterable objects. Leave for...in for rare situations with objects whose shape you don’t know up front, and even there Object.keys() or Object.entries() together with for...of is often more convenient.
Syntax
#for (const value of iterable) {
// statements
}
for (const key in object) {
// statements
}More examples
#const points = [10, 20, 30]
for (const index in points) {
console.log(index + 1)
}
for (const [index] of points.entries()) {
console.log(index + 1)
}In for...in the index is a string, so + 1 concatenates text. for...of with entries() gives a numeric index, so the addition works normally.
const student = { name: 'Jack', level: 4 }
for (const key in student) {
console.log(key, student[key])
}
for (const [key, value] of Object.entries(student)) {
console.log(key, value)
}For a plain object with no inherited properties, both loops give the same result. Object.entries(), however, returns only the object’s own keys, so it’s safer.
Good practices
#- For arrays, always choose
for...of(orforEach(),map()).for...inon an array is a common cause of hard-to-find bugs. - Need an object’s keys in a
for...ofloop? UseObject.keys()orObject.entries(), then you don’t need to checkObject.hasOwn(). - With
awaitin a loop over an array of asynchronous operations, onlyfor...ofworks.
Related entries
#- for...ofWalks the successive values of an iterable object: an array, a string, a Map, a Set, and others.
- for...inWalks the names of an object’s enumerable properties, including ones inherited from the prototype.
- Object.entries()Returns an array of an object’s [key, value] pairs.
- Object.keys()Returns an array of an object’s own, enumerable property names.
- Array.prototype.forEach()Calls a function for every element of the array.
Spotted a mistake or missing an example? Write to us.