JavaScript Loops: The Ins and Out
Tags: programming, javascript, webdev, tutorial
Published: 2022-11-26 09:49:12

## 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(people[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!