> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/day-3-loops-and-event-handling/loops.md).

# Loops

Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions typically return `true` or `false`. A loop will continue running until the defined condition returns `false`.

### `while` loop

The most fundamental *repetition* construct, present in pretty much every programming language, is the `while` loop. The condition is evaluated before executing the statement. The loop is run for as long as the condition is `true`.

#### Syntax

```javascript
while (condition) {
  // statement
}
```

#### Example 

Print all numbers up to 20.

```javascript
let i = 1;

while (i <= 20) {
  console.log(i);
  i++;
}
```

### `do...while` loop

The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.

#### Syntax

```javascript
do {
  // statement
} while (condition);
```

#### Example&#x20;

Print all numbers up to 20.

```javascript
let i = 1;

do {
  console.log(i);
  i++;
} (i <= 20)
```

### `for` loop

The **`for`** statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement to be executed in the loop.

#### Syntax

```javascript
for (initialization; condition; finalExpression) {
  // code
}
```

The `for` loop consists of three optional expressions, followed by a code block:

* `initialization` - This expression runs before the execution of the first loop, and is usually used to create a counter.
* `condition` - This expression is checked each time before the loop runs. If it evaluates to `true`, the `statement` or code in the loop is executed. If it evaluates to `false`, the loop stops. And if this expression is omitted, it automatically evaluates to `true`.
* `finalExpression` - This expression is executed after each iteration of the loop. This is usually used to increment a counter, but can be used to decrement a counter instead.

Any of these three expressions or the the code in the code block can be omitted.

#### Example&#x20;

Print all numbers up to 20.

```javascript
for (let i = 1; i <= 20; i++) {
  console.log(i);
}
```

### `continue` statement&#x20;

The `continue` statement terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.

#### Example

Using `continue` print only even numbers

```javascript
for (let i = 1; i <= 20; i++) {
  if(i % 2 === 1) {
    continue;
  }
  console.log(i);
}
```

### `break` statement&#x20;

The `break` statement terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.

#### Example

Using `break` exit the while loop after 100.&#x20;

```javascript
let i = 1;

while (true) {
  if (i > 100) {
    break;
  }

  console.log(i);
  i++;
}
```

### References

* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for>
* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while>
* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while>
* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue>