Introduction

JavaScript loops are a way of automating repeated tasks and concepts in your code. Loops will iterate, to mean repeat, a specific task until a condition is met. In other words, if a condition is true, the loop will keep running until it's false.

Loops simplify your work as a developer. It would be tedious to re-write one hundred repeated tasks, which is where loops come in! There are 3 kinds of loops. The 'for' loop, 'while' loop and 'do...while' loop.

The 'for' Loop

The 'for' loop typically functions by initializing an iterator variable, followed by a condition and an increment.

The Code Syntax

for (initial iterator variable; condition; increment value) {
// code execution
}

Note that a 'for' loop is always separated by ; inside the parentheses.

Code example

Here we will initialize people at 8, however, we expect they will be less than 16, this means our 'for' loop will stop at 15. people++ will increment our loop by 1 for every iteration. Once the condition evaluates to 'false', which is after 15 people, then the loop will automatically stop.

for (let people = 8; people<16; people++) {
console.log(people)
}

The expected output will run from 8 to 15.

Reverse 'for' Loop

The same way we executed a forward loop is the same way we get to execute a backward loop. We will use the -- operator

Code Example

for (let people = 8; people>=0; people--) {
console.log(people)
}

The expected output will run from 8 to 0.

Iterating through an Array

As you already know, arrays hold data items. We can also iterate through an array using loops. The 'for' loop will use an array's .length property.

Code Example

const people = ['Ann', 'Emma', 'Jack'];
for (let i = 0; i < people.length; i++) {
  console.log(animals[i]);
}

The expected code output will be:

Ann
Emma
Jack

Our stopping condition checks that i is less than people.length

The 'while' Loop

As long as a certain condition evaluates to true, the 'while' loop will continue running. It is always a good practice to use a while loop in cases where you do not know before hand just how many times the loop should keep running.

Code Syntax

while (condition) {
//code
}

Code Example

let i = 0;
while (i<16) {
console.log('i');
i++
}

The 'do...while' Loop

A 'do...while' loop will execute a task once, ascertain that it is true, and keep at it until a certain condition fails. Unlike a 'while' loop, 'do...while' will run at least once. As a developer you use this loop when you want the code to run at least once.

Code Syntax

do {
// code
}while (condition)

Code Example

let i = 1;

do {
  console.log(i);
  i++;
} while (i < 10);

The code output will run from 1 to 9.

Conclusion

Successfully utilizing loops means you need to consider whether your solution needs a prior tested loop or a post tested loop. Loops are a great way to automate repeated tasks. Loops are not used in isolation and you can always use other JavaScript methods to successfully implement tasks.

Happy Reading!