for...of vs for...in

Everything you should know before using for...in or for...of

for...of

for...of statement creates a loop iterating over
iterable objects, including: build-in String, Array,array-like objects (e.g: arguments or NodeList ), TypedArray, Set, Map, and user-defined iterables. It invokes a custom iterable hook for the statements to be executed for the value of each distinct property of the object.

Iterate over `Array`

let l = [20, 30, 40];
// use let 
for (let item of l) {
    item += 1
    console.log(item)
}
// 21
// 31
// 41

// use const 
for (const item of l) {
    console.log(item)
}
// 20
// 30
// 40

Iterate over `NodeList`

Iterate through li with class .list and adding .active

let lis = document.querySelectorAll('ul > li.list');

for (let li of lis){ 
li.classList.add('active');
}

Iterate over `String`

let str = 'hello';

for (let char of str) {
    console.log(char)
}
// h
// e
// l
// l
// o

Iterate over `Set` and `Map`

// Set
let list = [1, 2, 2, 3, 4];
let set = new Set(list);

for (let i of set) {
    console.log(i);
}
// 1
// 2
// 3
// 4

// Map
let map = new Map([['milk', 10], ['potatoes', 20]]);

for (let [key, value] of map) {
    console.log(key, value) 
}
// milk 10
//  potatoes 20

for...in

for...in can be applied on iterable, object and return the index or key of each element.

let arr = [1, 3, 4];

let obj = { milk: 10, grappes: 23 };

// work well
for (let key in arr) {
  console.log(key);
}
// Output:
// 0
// 1
// 2

// will return keys
for (let key in obj) {
  console.log(key);
}
// Output:
// milk
// grappes

Blog

Everything to know about for...in and for...of

Ambroise BAZIE

for...of vs for...in

for...of

Iterate over `Array`

Iterate over `NodeList`

Iterate over `String`

Iterate over `Set` and `Map`

for...in

Thank You

Join Our Newsletter. No Spam, Only the good stuff.

Related

Everything to know about for...in and for...of

Ambroise BAZIE

for...of vs for...in

for...of

Iterate over Array

Iterate over NodeList

Iterate over String

Iterate over Set and Map

for...in

Thank You

Join Our Newsletter. No Spam, Only the good stuff.

Related

Iterate over `Array`

Iterate over `NodeList`

Iterate over `String`

Iterate over `Set` and `Map`