Which loop iterates over iterable objects like arrays?

Which loop iterates over iterable objects like arrays? The answer is for...of.

Introduced with ECMAScript 2015, the for...of loop walks through the values produced by an iterable. Arrays, strings, Maps, Sets, typed arrays, and generator results can all be used with it. For example, for (const item of items) accesses each array element directly, without requiring an index.

A common mix-up is for...in. That loop enumerates property keys, which may include inherited or non-index properties, so it is generally unsuitable for reading array values. The traditional for loop remains useful when code needs an index, custom increments, or precise control over traversal. Array.prototype.forEach() also visits array elements, but it is a method rather than a loop syntax and cannot be stopped with break.

The iterable protocol is the key idea: JavaScript obtains an iterator from the object and repeatedly asks it for the next value until the iterator reports completion. This makes for...of especially useful for collections whose internal structure is not simply an indexed array.