Loops in Javascript
Tags: javascript, beginners, webdev
Published: 2021-12-02 17:41:26

Hello guys Today i am going to discuss Loops in javascript

What is a loop?
Loops can execute a block of code a number of times until a given condition returns false and the loop breaks.

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Example - 
Suppose we have an array - 
```javascript
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
```
We want to print the element of this array So , 
Instead of writing:
``` javascript
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
```

You can write:
```javascript
for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}
```

Output - 
```
BMW
Volvo
Saab
Ford
Fiat
Audi
```

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

* for - loops through a block of code a number of times
* for/in - loops through the properties of an object
* for/of - loops through the values of an iterable object
* while - loops through a block of code while a specified condition is true
* do/while - also loops through a block of code while a specified condition is true


The For Loop - 
The for loop has the following syntax:

for (initialization; condition;increment/decrement) {
  // code block to be executed
}

* initialization - The initial value of the loop
* condition  - To check that the condition is satisfied or not to come out of the loop
* increment/decrement - To increase or decrese the value and get  to the next iteration.

Example - 

```javascript
for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
```

Output - 
```
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
```

From the example above, you can read:

* Statement 1 sets a variable before the loop starts (let i = 0).

* Statement 2 defines the condition for the loop to run (i must be less than 5).

* Statement 3 increases a value (i++) each time the code block in the loop has been executed.



The For In Loop - 
The JavaScript for in statement loops through the properties of an Object

Syntax
for (key in object) {
  // code block to be executed
}

Example - 

```javascript
const person = {fname:"John", lname:"Doe", age:25};
let text = "";
for (let x in person) {
  text += person[x];
}
```

Output - 
```
John Doe 25
```

Example Explained
* The for in loop iterates over a person object
* Each iteration returns a key (x)
* The key is used to access the value of the key
* The value of the key is person[x]


The For Of Loop - 
The JavaScript for of statement loops through the values of an iterable object.

It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more.

Syntax
for (variable of iterable) {
  // code block to be executed
}

* variable - For every iteration the value of the next property is assigned to the variable. Variable can be declared with const, let, or var.

* iterable - An object that has iterable properties.


Example - 

```javascript
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x;
}
```

Output - 
```
BMW
Volvo
Mini
```

The While Loop - 
The while loop loops through a block of code as long as a specified condition is true.

Syntax
while (condition) {
  // code block to be executed
}

Example
In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10:

```javascript
while (i < 10) {
  text += "The number is " + i;
  i++;
}
```

Output - 
```
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
```

NOTE - If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.


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
do {
  // code block to be executed
}
while (condition);
Example
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.

```javascript
do {
  text += "The number is " + i;
  i++;
}
while (i < 10);
```

Output - 
```
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
```

Array.forEach() - 
The forEach() method calls a function (a callback function) once for each array element.

Example- 

```javascript 
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value;
}
```

Output- 

```
45
4
9
16
25
```

Note that the function takes 3 arguments:

* The item value
* The item index
* The array itself

The example above uses only the value parameter. It can be rewritten to:

```javascript
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value;
}
```

THANK YOU FOR READING THIS POST AND IF YOU WANT TO GIVE ANY SUGGESTION OR FIND ANY ERROR PLEASE MENTION IT IN THE COMMENT SECTION

SOURCE - https://www.w3schools.com/js/js_loop_for.asp