Even if you’re new to coding, you’ve probably came across the good ol’ for loop:

for (let i = 0; i < array.length; i++){
console.log(‘oh hai’)
}

While this common control flow statement is totally fine for all intents and purposes (and still probably the most versatile), ES2015 provides some clean looking revisions:

for..of and for..in

for..of iterates over the elements of an array:

const odds = [1,3,5,7,9]

for..in iterates over the keys for each index in the array:

const odds = [1,3,5,7,9]

Notice that we are able to use const when defining a variable inside these new loops. This works because every iteration creates a new scope, which is not the case with the classic for loop we all hold so dearly.

Let’s also see how these loops work with objects instead of arrays.

const dude = {
abides: true,
drink: “White Russian”,
hasRug: false,
donny: “Out of his element”
}

for..of:

for (const value of dude){
console.log(value)
}

for..in:

for (const key in dude){
console.log(key)
}

So it seems that the for..of loop is not able to iterate over an object, while the for..in loop is. Hmm.

While the classic for loop is definitely more versatile, I think these ES2015 additions to the JavaScript loop family offer a fresh alternative for simple looping tasks.

Happy coding!

Full Stack Software Engineer | Audiophile