ES6 — For In / For of

Gustavo Kleist

This article was created to share some knowledge on ES6 features, alongside some usage samples.

Here I will create a small sample of an array to be accessed by For in and For of loops.

I will receive this result if I go through the array using For In loop.

for (let item in arr) {console.log(item); //0 //1 //2 }

We can observe that, operating for in loop we can access the index of each position of the array.

Now let’s try with the For Of.

for (let item of arr) {console.log(item); //a //b //c }

Now we got access to the actual value of each position.

In conclusion, the For In can be used to access the index of each array element, and the For Of is used to access the values of each position.

Now, let's complicate it a little bit.

We changed our array into a object, in order to see what kind of effects and things we can do using these loops.

On the For in perspective, we still can access the index of each element.

for (let key in arr) {console.log(key); //a //b //c }

Now let's see what we can do for For of.

We will use the Object.entries to convert the object into an array.

for (let [key, value] of Object.entries(arr)) { console.log('key: ${key}, value: ${value}'); //key: a, value 1 // key: b, value: 2 // key: c, value: 3 }

So now we can access both index and value.

Thanks for the reading and keep tuned for the next article.

Let's Talk