JavaScript Loops: The Ins and Out

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 typically functions by initializing an iterator variable, followed by a condition and an increment.

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

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

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.

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

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

The expected output will run from 8 to 0.

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.

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

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.

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

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.

do {
// code
}while (condition)
let i = 1;

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

The code output will run from 1 to 9.

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!