Home » Javascript » What is the difference between ( for… in ) and ( for… of ) in javascript?

What is the difference between ( for… in ) and ( for… of ) in javascript?

Posted by: admin November 29, 2017 Leave a comment

Questions:

I know what is for... in loop(it iterate over key), but heard first time about for... of(it iterate over value). I am confused with for... of loop. I didn’t get adject. This is the code below :

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

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

for (var i of arr) {
   console.log(i); // logs "3", "5", "7"
    //it is does not log "3", "5", "7","hello"
}

What I got is, for… of iterates over property values. then why it doesn’t log(return) "3", "5", "7","hello" instead of "3", "5", "7" ? but for... in loop iterate over each key (“0”, “1”, “2”, “foo”). here for... in loop also iterate over foo key. but for… of not iterarte over value of foo property ie "hello".Why it is like that?

Long story in short:

here i console for... of loop. it should be log "3", "5", "7","hello" but here it logs "3", "5", "7". Why ?

Example Link

Answers:

for in loops over enumerable property names of an object.

for of (new in ES6) does use an object-specific iterator and loop over the values generated by that.

In your example, the array iterator does yield all the values in the array (ignoring non-index properties).

Questions:
Answers:

I find a complete answer at : https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Although it is for type script, this is same for javascript too)

Both for..of and for..in statements iterate over lists; the values
iterated on are different though, for..in returns a list of keys on
the object being iterated, whereas for..of returns a list of values
of the numeric properties of the object being iterated.

Here is an example that demonstrates this distinction:

let list = [4, 5, 6];

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

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

Another distinction is that for..in operates on any object; it serves
as a way to inspect properties on this object. for..of on the other
hand, is mainly interested in values of iterable objects. Built-in
objects like Map and Set implement Symbol.iterator property allowing
access to stored values.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}
Questions:
Answers:

The for-in statement iterates over the enumerable properties of an object, in arbitrary order.

The loop will iterate over all enumerable properties of the object itself and those the object inherits from its constructor’s prototype

You can think of it as “for in” basically iterates and list out all the keys.

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]