Difference between for...of & for...in

Bothfor...inandfor...ofstatements iterate over something. The main difference between them is in what they iterate over.

Thefor...instatement iterates over the enumerable properties of an object, in an arbitrary order.

Thefor...ofstatement iterates over data that iterable object defines to be iterated over.

The following example shows the difference between afor...ofloop and afor...inloop when used with anArray.

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

Let us look into the above code step by step.

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {}; 

let iterable = [3, 5, 7]; 
iterable.foo = 'hello';

Every object will inheritobjCustomproperty and every object that is anArraywill inheritarrCustomproperty because of adding those properties toObject.prototypeandArray.prototype. The objectiterableinherits propertiesobjCustomandarrCustombecause of inheritance and the prototype chain.

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" 
}

This loop logs only enumerable propertiesofiterableobject, in original insertion order. It doesn't log array elements 3, 5, 7orhellobecause those are not enumerable properties. But it logs array indexes as well asarrCustomandobjCustom, which are. If you're not sure why the properties are iterated over, there's a more thorough explanation of howarray iteration and for...inwork.

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

This loop is similar to the first one, but it useshasOwnProperty()to check, if the found enumerable property is object's own (not inherited). And if it is, the property is logged. Properties0,1,2andfooare logged because they are own properties (not inherited). PropertiesarrCustomandobjCustomare not logged because they are inherited.

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7 
}

This loop iterates and logs values that iterableas an iterable object defines to be iterated over, which are array elements 3, 5, 7and not any of object's properties.