For loop vs. For/In loop

Hiya there! There are very subtle differences between for loop , for...in loop and for...of loop. Knowing them differences will defo make you a better dev.

• The for loop in Vanilla JavaScript was used when you need loop over a sequence. Mostly an Array , right? As JavaScript got evolved, for loop gave some surprising and unexpected results while iterating over a sequence. It was all coz of Closures and Scope and pollution of Global Scope. This is how for loop looks like:

arr = []

for (var i = 0; i < arr.length; i += 0) {
 //....
}

• Comes for...of loop to rescue, ES6 provides you a lots of fixes for the scope leakage of aliases inside the loop. ES6 introduced let , const and arrow function to keep local alias bind to the local scope. Now, for...of loop only iterates over iterables. If you're coming from Python or Ruby, you might already be familiar with iterables. And for a sequence to be an iterable , it should implement @@Iterator method. To sum it all up, for..of loop is recommended and it prevents leakage of scope , unlike for loop. And both loops outputs the same result. To know more about generators , iterables and iterators, visit this link.

arr = [1,2,3,4,5]

for (let num of arr) {
  console.log (num)
}

// 1
// 2
// 3
// 4
// 5

• The for...in loop is similar to for...of loop, but there is a gotcha with for..in loop. The for..in loop outputs the indexes or keys if iterating over an iterable. Here is the example and compare it to the example above:

arr = [1,2,3,4,5]

for ( let num in arr) {
  console.log (num)
}

// 0
// 1
// 2
// 3
// 4

I hope this helped!

~ Ari