for...of

Statement loops over iterable values of an object

Elements/Values OF the Collection (array)

/* Array OF elements */ 
const arr = ['a', 'b', 'c'];

for (const element of arr) {
  console.log(element); // 'a', 'b', 'c'
};

for...in

Statement loops over iterable keys of an object

A key IN the Object

/* Object IN key */ 
const object = { a: '1', b: '2', c: '3' };

for (const key in object) {
  console.log(key); // 'a', 'b', 'c'
  console.log(object[key]); // '1', '2', '3'
}; 

for...in vs for...of

of = value

• loops over values of an array

in = key

• loops over property names of an object

const list = [4, 5, 6];

for (let key in list) {
  console.log(key); // "0", "1", "2",
}

for (let value of list) {
  console.log(value); // "4", "5", "6"
}