What is the primary difference between for ... of and for ... in when iterating over an array?

The distinction lies in how each loop interacts with the structure of an array. The for...of loop is designed to iterate directly over the values (elements) in an iterable object, such as an array. This means that when you implement a for...of loop on an array, you directly access the actual values contained within that array, making it straightforward to work with the data itself.

In contrast, the for...in loop is intended to iterate over the enumerable properties of an object, which includes the string keys of properties for arrays. When you use for...in on an array, it produces the array indexes (which are string representations of numbers) rather than the elements themselves. This can lead to unintended behaviors because for...in does not guarantee the order of the iteration, and it is better suited for objects rather than for iterating arrays where the focus is on the values.

Therefore, the primary difference is that for...of focuses on retrieving the elements (the actual values) of the array, while for...in focuses on the indexes, leading to the conclusion that for...of iterates via elements while for...in uses indexes.