"for ... of" and "for ... in"
Know that they are different beasts.
You cannot use for ... of and for ... in interchangeably in JavaScript.
for ... of statements are for iterable objects. So, you can iterate over arrays, strings, maps, and sets with a for ... of statement.
On the other hand, for ... in statements are for enumerable properties of an object. Enumerable properties are properties whose internal flag is set to true by default.
Reference
for...of - JavaScript | MDN
The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of…
for...in - JavaScript | MDN
The for...in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties.
Enumerability and ownership of properties - JavaScript | MDN
Enumerable properties are those properties whose internal enumerable flag is set to true, which is the default for properties created via simple assignment or via a property initializer. Properties defined via Object.defineProperty and such default enumerable to false.
