Different Iteration Targets and Purposes

Explore the key differences between the similar-looking for...in and for...of loops in JavaScript, and compare their distinct purposes and use cases.

Basic Concept Comparison

The key differences between for...in and for...of can be summarized in the following table:

Key Differences Between for...in and for...of
Category for...in for...of
Iteration Target Objects iterable by property (key or index) Objects iterable by value
Loop Behavior Operates on properties (keys or indexes) retrieved from the object Operates on values retrieved from the object
Applicable Objects
  • Plain objects
  • Arrays
  • Arrays, strings, Map, Set, and other objects that implement the Iteration Protocols
  • DOM collections such as HTMLCollection and NodeList
  • Some array-like objects such as arguments (array-like objects)
  • User-defined objects that implement the Iteration Protocols
Usage Used to iterate over the properties (keys) of an object Used to iterate over the values of an object
Purpose Mainly for debugging, to check which properties (keys) exist in a plain object, rather than for handling data Intended for handling data by iterating over values

Examples

Check the different iteration targets and purposes of for...in and for...of loops using actual code examples.

for...in

The for...in loop is mainly used for debugging purposes, to check which properties (keys) exist in a plain object, rather than for handling data.

JavaScript 
const user = {
    name: "John",
    age: 30
};

for (let key in user) {
    console.log(key, ":", user[key]);
}
/*
Output:
"name" : "John"
"age" : 30
*/

for...of

The for...of loop is mainly used to handle values in an object. For example, you can use it to iterate over elements in a NodeList from the DOM.

HTML 
<ul>
    <li>Burger</li>
    <li>Fries</li>
    <li>Soda</li>
</ul>
JavaScript 
const liElements = document.querySelectorAll("li"); // Select all li elements
console.log(liElements); // NodeList(3) [li, li, li]

// Applying for...of loop
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// Output: "Burger" "Fries" "Soda"

Code Explanation
The NodeList object returned by querySelectorAll() is array-like and can be iterated using a for...of loop.

Things to Keep in Mind

  • Use for...in when you need to iterate over property names of plain objects for debugging purposes.
  • Use for...of when you need to iterate over values in DOM collections like NodeList.

Specifications

Specification for the for...in and for...of Statements
Specification
for...in, for...of ECMAScript Language Specification
#sec-for-in-and-for-of-statements

Compatibility

Compatibility for the for...in and for...of Statements
Statement
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
Node.js
Node.js
for...in 1 12 1 1 0.10
for...of 38 12 13 7 0.12

References

See also