JavaScript ES6 Loops

Loops allow you to iterate over collections and objects. They allow you to execute the same code block again and again until a certain condition is met. For example:

let x = 0

while(x < 5){
  console.log(x)
  x++
}

//logs 0,1,2,3,4

This while loop repeatedly increments x++ until the condition x < 5 is met.

Types of loops

There are two major classifications of loops in JavaScript. They are definite and indefinite loops. We explore each in more detail below:

Definite loops

Definite loops have a fixed number of iterations. Here are some examples of definite loops used in JavaScript:

for loops

for(var i = 0; i < 5; i++){
  console.log(i);
}

//logs 0,1,2,3,4

In a for loop, we define an initial count value var i = 0;, a termination condition i < 5;, and a step function i++. In plain english, this reads "while i is less than 5, add 1".

This is considered a definite loop because there is an explicitly defined termination case i < 5. Once i is greater than 4, the loop stops running.

for...in loops

let obj = {"a":1, "b":2}

for(let k in obj){
  console.log(k)
}

//logs a,b

for...in loops are similar to for loops, except they iterate through properties of an object. These loops are better for working with objects or dictionaries where index order isn't important.

Array.forEach()

You can also use the Array.forEach() method to easily iterate over elements in an array.

let array = [1,2,3,4]

array.forEach((x) => {
  console.log(x);
})

//logs 1,2,3,4

for...of loops

let array = [1,2,3,4]

for(let x of array){
  console.log(x);
}

//logs 1,2,3,4

The for...of loop is the new and improved version of for...in loops. It addresses all of the major issues with for...in and is more elegant than the original for loop.

Indefinite loops

Indefinite loops don't have a fixed number of iterations. Instead, they rely on a condition being met to stop execution. Here are some examples of definite loops in JavaScript:

while loops

let x = 0

while(x < 5){
  console.log(x)
  x++
}

//logs 1,2,3,4

In this while loop, the code executes until the condition x < 5 is no longer true.

do...while loops

let x = 0

do{
  console.log(x)
  x++
}while(x < 5)

//logs 1,2,3,4

This is similar to the while loop the key difference being when the loop evaluates the condition. With a do...while loop, the condition x < 5 isn't evaluated until after the loop runs once.

Controlling loops with break and continue

You can control loops with break and continue

Using break to exit

let array = [1,2,3]

for(let x of array){
  if(x == 2){
    break
  }
  console.log(x)
}

//logs 1

With the break keyword, you can exit a loop prematurely. This works similar to return in functions for exiting code blocks.

Using continue to skip

let array = [1,2,3]

for(let x of array){
  if(x == 2){
    continue
  }
  console.log(x)
}

//logs 1,3

The continue keyword lets you skip a single iteration of the loop and "continue" on. Since we call continue if x == 2, this loop will print every element in the array except for 2!

for...of vs for...in

The for...of was introduced with ES6 to address the pitfalls seen with for...in. While for...in is great for iterating through object properties, it's terrible for arrays where order matters. Additionally, for...in loops include expando properties and list elements in arbitrary order. This can lead to some unexpected results if you're unfamiliar with loops.

For these reasons, for...of is the preferred method for iterations. It's concise, addresses the pitfalls of for...in, and still works with control flow keywords like break and continue.

Conclusion

Loops are a great introduction to control flow. You are now ready to look more at control flow and basic decision making in JavaScript.