for…of loop

The for…of loop was introduced in ES6 and is used to iterate over anything that has [Symbol.iterator] property. This includes array, strings and NodeList. They cannot be used to iterate over Objects are not iterable.

If we check the __proto__ of an array, we can find the [Symbol.iterator] property.

But it is not the case with Objects as it is not iterable.

//Array example
const array = ['a', 'b', 'c', 'd'];
for (const item of array) {
console.log(item)
}

// Output: 

a b c d

//String example
const string = 'Web Developer';
for (const character of string) {
console.log(character)
}

//Output:

W e b D e v e l o p e r

//NodeList example
const elements = document.querySelectorAll('.foo');
for (const element of elements) {
   element.addEventListener('click', doSomething);
}