ES6 for loops: Best Practices

For loops are common control flow statements used to iterate over range, sequential data types etc. The ES6 revision of JavaScript provides several new features making the language more powerful, crisp and elegant. Here's what I came across as the best practices for the for loop:

Vanilla for loop

// Old and Bad way

for(var i = 0; i < 10; i++) {
  // Do Stuff
}
// End of loop

console.log(i)
// 10
// iterator still accessible after the end of the loop

Using var to initialize the iterator in the traditional for loop causes it to be accessible even after the loop is over. A better alternative is to use the newer let keyword to initialize the iterator.

// Better way

for(let i = 0; i < 10; i++) {
  // Do Stuff
}
// End of loop

console.log(i)
// undefined
// iterator not accessible

The let keyword limits the scope of the iterator to the for loop block only.

Newer flavors of for loop

The ES6 revision also provides two new for loops the for..of and for..in loop.

for..of:

let primes = [2, 3, 5, 7];

for(const value of primes) {
  console.log(value);
}
// 2
// 3
// 5
// 7
// Iterates over the values of the array

for..in:

let primes = [2, 3, 5, 7];

for(const key in primes) {
  console.log(key);
}
// '0'
// '1'
// '2'
// '3'
// Iterates over the keys of the array

Notice that the for..in loop here returns the keys in the form of strings and not numbers as one would expect. Another weird thing about the for..in loops is that they can iterate thru an object while the for..of loop cannot:

let sandwich = {
  grilled: true,
  butter: "lots",
  bread: "whole wheat",
  calories: 250
}

for(const value of sandwich) {
  console.log(value)
}
// Error: Objects are not iterable

for(const key in sandwich) {
  console.log(key)
}
// "grilled"
// "butter"
// "bread"
// "calories"

const vs let

If you were reading until now really carefully, you would have noticed that I have use let in the vanilla for loop and const in the ES6 flavors of for loops. The vanilla for just increases the initial iterator value and there is a single scope for the whole loop. Thus using const won't work as increasing the iterator value in the next iteration will result in an error. In the newer loops however, every iteration creates a new scope. Thus we can use const as well as let in these loops. const is more preferred in such cases as we don't want to change the value of the iterable.

And that's it folks! Thankyou for reading and have a great day 😄

Comments

[José dBruxelles]

About for..in, in the code, you wrote:
for(const key of primes) {

Instead of

for(const key of primes) {

[Sahil Bondre]

Yup fixed! Thank you for pointing it out.😄

[Usman Khalil]

Just wanted to thank you for this awesome explanation.

[Sahil Bondre]

I am glad that I was helpful to someone 😄.

[Timkor]

You made a typo at the code example of 'for .. in'.

Nice summary!

[Sahil Bondre]

Fixed!
Thank you!.

[Kirill Zhdanov]

No word about performance Sahil) what about?

[Sahil Bondre]

Performance wise the vanilla for loop would be your best bet. Thank-you for pointing this out, I'll focus on the performance aspects as well in my next posts.

[hafijur-rahman1]

Nice describe