What is the difference between for...of and for.. in?

Question

I was taking a look at that question from the SOEN and there I saw this for..of.

I’ve never seen that before in Javascript.

This is a new resource and we can implement it reliably, or we should still use the old for..in?

What’s the difference between him and for..in?

Answer 1

The for..of is a new construction in Ecmascript 6, and therefore should only be used when the browsers provide appropriate support for this version, and enable it by default. Otherwise, your code may be rejected by a significant portion of your users.

The for..of is similar to for..in, except that it only iterates on the properties enumerable of the object/array. A for..in iterate over all of them, including custom properties added by the user:

function log(x) { document.body.innerHTML += "<pre>" + x + "<pre>"; }

var arr = [1,2,3];
arr.foo = "bar";

var obj = { 0:1, 1:2, 2:3, length:3, foo:"bar" };

var obj2 = Object.create(null, {
  0: { value:1, enumerable:true },
  1: { value:2, enumerable:true },
  2: { value:3, enumerable:true },
  length: { value:3 },
  foo:{ value:"bar" }
});

document.body.innerHTML += "<h1>for..in</h1>";

for ( var p in arr ) {
  log("arr[" + p + "] = " + arr[p]);
}
for ( var p in obj ) {
  log("obj[" + p + "] = " + obj[p]);
}
for ( var p in obj2 ) {
  log("obj2[" + p + "] = " + obj2[p]);
}
      
document.body.innerHTML += "<h1>for..of (simulação)</h1>";
      
arr.forEach(function(e, i) {
  log("arr[" + i + "] = " + e);
});
arr.forEach.call(obj, function(e, i) {
  log("obj[" + i + "] = " + e);
});
arr.forEach.call(obj2, function(e, i) {
  log("obj2[" + i + "] = " + e);
});

In the example above, I used the Array.prototype.forEach to simulate a for..of - otherwise the example would not compile at all browsers, and according to MDN the behavior of both should be the same. It is also noted that the for..of applies both to arrays and to "array-Likes", so that it can be used even in a list of DOM nodes (returned by document.querySelectorAll for example).

P.S. As pointed out in too answers, there is also the difference that the variable used in the for..in receives the name of the property, while in the for..of she gets her value:

for ( var p in [1,2,3] ) // p será "0", "1", "2"

for ( var p of [1,2,3] ) // p será 1, 2, 3

The consequence of this is that, as far as I know, if you want to also refer to the index it is still necessary to use forEach (but as in practice we are usually only interested in value, it is still a very useful construction).

Answer 2

The main difference is that while the for..in iterates on the name of the properties of the object, the for..of iterates on the values of these properties. For example:

var arr = ["gato", "cachorro", "macaco"];
for (var i in arr) {
    console.log(i); // Imprime "0", "1", "2"
}

for (var i of arr) {
    console.log(i); // Imprime "gato", "cachorro", "macaco"
}

Note that for arrays, the for..of is equivalent to forEach that you can use from the prototype of the Array:

arr.forEach(function(i) {
    console.log(i); // Imprime "gato", "cachorro", "macaco"
});

Note that this Feature is still experimental, and not all browsers support it - so it is not advisable to use it.

More details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Answer 3

Apparently the for .. of creates a loop to interact with the values of eternal objects (Arrays, Sets, Maps) by MDN documentation, as long as the for .. in interacts on the properties of objects

for...in, the MDN page describes

for...of - a similar statement that iterates over the Property values
for...of - a similar sentence that interacts with values of property

Example

let arr = [3, 5, 7];
arr.foo = "hello";

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

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

The for...in recorded the indexes of array and the property foo

The for...of recorded the values of each of the array which is a interchangeable object