There are two ways of many using which you can loop over the iterables in JavaScript. for in loop and for of loop.

While both of the statements can loop over the iterables such as enumerable properties, there are key differences in both which I’ll discuss here.

for...in can be used in most of the cases as you’d be using it with both Objects and Arrays and also you can get values of the properties using their keys. However, when you’re only working with Arrays and only cares about property values, you’d be better off with the for...of.

First, the for...in can loop through both Arrays and Objects while the for...of can only loop through Arrays, Map, Set, arguments object.

const car = {
  brakes: '2',
  tires: '4'
}

Now, if we can loop over this object using for...in like so.

for (let i in car) {
   console.log(car[i]); // "2", "4"
}

As you can observe, the for...in statement can successfully iterate over the object. But this won’t be possible using for...of statement.

Upon iterating using the same object using for...of statement will result in a TypeError error like so.

for (let i of car) {
   console.log(i); // TypeError: car is not iterable
}

2nd difference-

The second and the biggest difference between both of these statements are, by default, the for...in iterates over property names and the for...of iterates over property values.

For instance, let’s say we have the following array.

const rgb = ['red', 'green', 'blue']

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

As you may observe, the for...in is iterating over the keys of the array and hence the output is "0", "1", "2".

On the other hand, let’s iterate the same array using for...of.

for (let value of rgb) {
   console.log(value); // logs "red", "green", "blue"
}

As you can see, the for...of can only iterate over array values, and hence the output would be "red", "green", "blue".