const iterable = [0, 1, 2];
for (let i of iterable) {
    console.log(i);
}

Expected output:

0 1 2

The advantages from the for…of loop are:

• This is the most concise, direct syntax yet for looping through array elements
• It avoids all the pitfalls of for…in
• Unlike forEach(), it works with break, continue, and return

Support of for…of in other collections

Strings

for…of will treat a string as a sequence of Unicode characters:

const string = "abc";
for (let chr of string) {
  console.log(chr);
}

Expected output:

a b c

Sets

for…of works on Set objects.

Note:

• A Set object will eliminate duplicates.
• Please check this reference for Set() browser support.

const names = ['bob', 'alejandro', 'zandra', 'anna', 'bob'];

const uniqueNames = new Set(names);

for (let name of uniqueNames) {
  console.log(name);
}

Expected output:

bob alejandro zandra anna

Maps

You can also use for…of loops to iterate over Maps. This works similarly to arrays and sets, except the iteration variable stores both a key and a value.

const map = new Map()
  .set('abc', 1)
  .set('def', 2)

for (const iteration of map) {
  console.log(iteration) //will log ['abc', 1] and then ['def', 2]
}

You can use destructuring assignment to capture the key and the value separately:

const map = new Map()
  .set('abc', 1)
  .set('def', 2)

for (const [key, value] of map) {
  console.log(key + ' is mapped to ' + value)
}
/*Logs:
  abc is mapped to 1
  def is mapped to 2
*/

Objects

for…of loops do not work directly on plain Objects; but, it is possible to iterate over an object’s properties by switching to a for…in loop, or using Object.keys():

const someObject = { name: 'Mike' };

for (let key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

Expected output:

name: Mike