How does for..of loop get values from Array

Question

I have this piece of code,

let array = ["cj1rdd9fc00013f69ccln57g0", "cj1rdda8x00023f69g9281ay8"];
for (let [key, value] of array) {
  console.log(key, value);
}

I expect, 0 cj1rdd9fc00013f69ccln57g0 and 1 cj1rdda8x00023f69g9281ay8 as the output. what am I missing here? How can I get the desired output?

Answer 1

Here is a bit of under the hood explanation.

for..of loop works on iterables. On each iteration it calls iterator.next().value to get values. Standard Array implementation has two kinds of iterators - the one that returns only values and the other that returns [key, value] pairs. If you need to get the second type of iterator, use array.entries().

let array = ["cj1rdd9fc00013f69ccln57g0", "cj1rdda8x00023f69g9281ay8"];
for (let [key, value] of array.entries()) {
  console.log(key, value);
}

Here is the demo of two types of iterators:

var arr = ['a','b'];
var valueIterator = arr[Symbol.iterator]();
valueIterator.next().value; // returns a
valueIterator.next().value; // returns b

var arr = ['a','b'];
var valueKeyIterator = arr.entries();
valueKeyIterator.next().value; // returns [0, a]
valueKeyIterator.next().value; // returns [1, b]

Answer 2

Let try to understand whats happening here:

As per MDN-Docs, for..of provides value of each iteration to the assignment.

So when you do for(var v of array), v will hold value.

Now when you do let [key, value], you are using something thats called as Destructuring Assignment.

What it does is, for given list of variables, it will assign values at corresponding index value.

So, in let [a,b] = [10, 20], a=10 and b=20.

Coming back to your example,

let [key, value] of array,

is evaluated as let [key, value] = "cj1rdd9fc00013f69ccln57g0", so key holds value at 0th index, a.k.a c and value holds j.

---

How can I get the desired output

You can use other looping mechanisms like for, array.forEach etc.

There are other mechanisms like .map, .filter, .some, .every, .reduce but they have their own usecase, and can be suggested based on the processing logic.

Array.forEach

let array = ["cj1rdd9fc00013f69ccln57g0", "cj1rdda8x00023f69g9281ay8"];

array.forEach(function(value, index){
  console.log(index, value)
})

Answer 3

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of

The way for of works is each time it will grab just the value, not the index.

let array = ["cj1rdd9fc00013f69ccln57g0", "cj1rdda8x00023f69g9281ay8"];
for (let item of array) {
  console.log(item);
}

If you want to include the index, see this question:

How do you get the loop counter/index using a for-in syntax in JavaScript?

Answer 4

This Code, Console.log Array

 let array = ["cj1rdd9fc00013f69ccln57g0", "cj1rdda8x00023f69g9281ay8"];
 var i,j,tempstring;
    for (i=0,j=array.length; i<j; i++) {
        tempstring = array[i];
        console.log(tempstring);
    }

Answer 5

This is a destructuring assignment . This will work for es6 Maps and not for Arrays . For arrays you can just use a for of loop .

Answer 6

If you want to get the value and index of an array in every iteration using some fancy iteration, try this.

let array = ["cj1rdd9fc00013f69ccln57g0", "cj1rdda8x00023f69g9281ay8"];
array.map((value, index) => {
    console.log(index, key);
});