JavaScript : Advanced loops: for in, for of

If you are JavaScript Developer, you are familiar with loops like for, while, do and forEach . In this blog I will show you two other ways, that we can loop in JavaScript and explain the difference between them.

Let’s jump to our code and learn about them:

const basket = ['strawberries', 'peaches', 'oranges']

Imagine we have basket of fruits. In order to loop through this array we used to do this:

for(let i = 0; i<basket.length; i++){
   console.log(basket[i]);
}
basket.forEach(item => {
console.log(item);
});

In both cases we will get same output:

strawberries
peaches
oranges

Now let’s talk about our new technique to loop through our array.

for of

for of loop works in a way that’s very similar to these two above. This is a new specification with ES6 and new feature of JavaScript. Here how it works:

for(item of basket){ 
   console.log(item)
}
Output: 
strawberries
peaches
oranges

We got the same result. item is the name of the variable. We can name it however we want. basket is the name of our array. With for in we can only iterate over arrays and strings. Iterating simply means we are able to go one by one through an entire array and look this items in basket . We can also iterate through string. For instance:

for(item of 'basket'){ 
   console.log(item)
}
Output: 
b
a
s
k
e
t

So arrays and string are iterable in JavaScript, because we are able to iterate over individual items.

for in

for in works with objects. Take a look at the code below:

const detailedBasket = { 
   strawberries: 5,
   peaches : 4,
   oranges: 11
}
for (item in detailedBasket){
  console.log(item)
}
Output:
strawberries
peaches
oranges

Basically for in allows us to loop over and see the object properties.

Note: We are not iterating here, because we can iterate only over arrays and strings. In JavaScript we are enumerating, because properties of an object are enumerable.

Difference:

If we try to use for of loop over our object called detailedBasket we will get big fat error, that says detailedBasket is not iterable.

But if we try to use for in loop over our array called basket , which does not have keys, we will get the following:

for(item in basket){
  console.log(item)
}
Output: 
0
1
2

in JavaScript you can think of JavaScript arrays like objects, because array has an index of 0, 1 and 2. So in our example, we can think of basket as an object that has properties. Under the hood, it looks like this:

const basket = { 
   0: 'strawberries',
   1: 'peaches',
   2: 'oranges'
}

for in loop enumerating through properties, which is indexes of items in a basket. We can also use Object.keys(basket) to get keys of our array. or Object.values(basket) to get values. I think it’s good to know the difference between for in and for ofloops. Especially, if you see them in a code base and you want to understand what’s happening. Also, now you know the difference between iterable and enumerable.

Conclusion

for in loop loops over enumerable properties and enumerable property names of an object. for of loop doesn’t work with objects, because they are not iterable.

for in → Use it with objects

for of → Use it with arrays and strings