Arrays iteration in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-05-07 14:55:36

## Introduction

Array iteration in JavaScript also known as Loops can execute a block of code a number of times.
Loops are useful if you wish to repeat the same code with a different value each time.

You can now write in simple lines and let loops do the job for you.

<u>Example</u>:     This is frequently the case while writing an array, if we are to code different array iteration values;

```javascript
const foods= array[fish, pizza, meat, rice, beans];

text += foods[0] + "<br>"; 

text += foods[1] + "<br>"; 
text += foods[2] + "<br>"; 
text += foods[3] + "<br>"; 
text += foods[4] + "<br>"; 
```

---
looping has made it so easy and fluent also time efficient instead of typing same code a number of time,
You can simply type in few lines of coding using loops
:

```javascript
const foods= array[fish, pizza, meat, rice, beans];
for(i=0; i<foods.length; i++){
console.log(i)

}
```



**Different Kinds of Loops**
JavaScript supports different kinds of loops:

1. for - loops through a block of code a number of times
2. for/in - loops through the properties of an object
3. for/of - loops through the values of an iterable object
4. while - loops through a block of code while a specified condition is true
5. do/while - also loops through a block of code while a specified condition is true.

---

**USES AND BENEFITS**
-Loops can execute a block of code a number of times
-Looping saves time and stress
-looping can be achieved in just few lines of coding.

---



## The For Loop

---

The for loop is often the tool you will use when you want to create a loop.

The for loop has the following syntax:
```javascript

for (statement 1; statement 2; statement 3) {
    code block to be executed
}
```
<u>Statement 1</u> is executed before the loop (the code block) starts.

<u>Statement 2</u> defines the condition for running the loop (the code block).

<u>Statement 3</u> is executed each time after the loop (the code block) has been executed.

<u>Example</u>

---

```javascript
for (i = 0; i < 6; i++) {
    text += "The number is " + i + "<br>";
}
```
From the example above, you can read:

<u>Statement 1</u>: sets a variable before the loop starts (var i = 0).
<u>
Statement 2</u>: defines the condition for the loop to run (i must be less than 6).

<u>Statement 3</u>: increases a value (i++) each time the code block in the loop has been executed.

Statement 1
Normally you will use statement 1 to initiate the variable used in the loop (i = 0).

This is not always the case, JavaScript doesn't care. Statement 1 is optional.

You can initiate many values in statement 1 (separated by comma):

<u>Example</u>

---

```javascript
for (i = 0, len = foods.length, text = ""; i < len; i++) {
    text += foods[i] + "<br>";
}
```
And you can omit statement 1 (like when your values are set before the loop starts):

<u>
Example
</u>
----
```javascript
var i = 2;
var len =foods.length;
var text = "";
for (; i < len; i++) {
    text += cars[i] + "<br>";
}
```
<u>Statement 2</u>
Often statement 2 is used to evaluate the condition of the initial variable.

This is not always the case, JavaScript doesn't care. Statement 2 is also optional.

If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

Note	If you omit statement 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser. Read about breaks in a later chapter of this tutorial. 
<u>Statement 3</u>
Often statement 3 increases the initial variable.

This is not always the case, JavaScript doesn't care, and statement 3 is optional.

Statement 3 can do anything like negative increment (i--), positive increment (i = i + 2), or anything else.

Statement 3 can also be omitted (like when you increment your values inside the loop):

Example
```javascript
var i = 0;
var len = foods.length;
for (; i < len; ) {
    text += foods[i] + "<br>";
    i++;
}
```

##     **The For/In Loop**

---

The JavaScript for/in statement loops through the properties of an object:

Example
```javascript
var person = {fname:"Andrew", lname:"Elijah", age:30};
var text = "";
var x;
for (x in person) {
    text += person[x];
}
```

##JavaScript While Loop

Loops can execute a block of code as long as a specified condition is true.
<u>
The While Loop</u>
The while loop loops through a block of code as long as a specified condition is true.

Syntax
```javascript
while (condition) {
    code action to be executed
}
```
<u>Example</u>
In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 100:

Example
```javascript
while (i < 100) {
    text += "The number is " + i;
    i++;
}
```
Note	If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.

---


## The Do/While Loop

---

The do/while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

Syntax
```javascript
do {
    code block to be executed
}
while (condition);
```
<u>Example</u>
The example below uses a do/while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:

Example
```javascript
do {
    text += "The number is " + i;
    i++;
}
while (i < 10);
```
Do not forget to increase the variable used in the condition, otherwise the loop will never end!



## Summary

The while loop is much the same as a for loop, with statement 1 and statement 3 omitted.

The loop in this example uses a for loop to collect the car names from the cars array:

Example
```javascript
var days = ["Mondays", "Tuesdays", "Fridays", "Sundays"];
var i = 0;
var text = "";

for (;days[i];) {
    text += days[i] + "<br>";
    i++;
}
```
The loop in this example uses a while loop to collect the car names from the cars array:

Example
```javascript
var days = ["Mondays", "Tuesdays", "Fridays", "Sundays"];
var i = 0;
var text = "";

while (days[i]) {
    text += days[i] + "<br>";
    i++;
}
```
so the loops are similar and can perform the same action if coded properly!!!!!