What are loops? Loops are a quick and easy way to do a task repeatedly. There are many different kinds of loops, but they all essentially do the same thing, they repeat an action some number of times. The various loop mechanisms offer different ways to determine the start and end points of the loop. There are various situations that are more easily served by one type of loop over the others.

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 Lets run through each and try and understand all this loopiness.

Good old For Loop

 for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

1. Statement 1 is executed (one time) before the execution of the code block.
2. Statement 2 defines the condition for executing the code block.
3. Statement 3 is executed (every time) after the code block has been executed.

Example

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

• 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.

For / In Loop

The For / In loop is used to loop through properties of an Object and or the values of Arrays.

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

//Array
for (variable in array) {
  code
}

Example Object

const person = {fname:"John", lname:"Doe", age:25};

let text = "";
for (let x in person) {
  text += person[x];
}

• 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]

Example Array

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

let txt = "";
for (let x in numbers) {
  txt += numbers[x];
}

For / Of Loop

The for of statement loops through the values of an iterable object. It also loops over iterable data structures such as Arrays, Strings, Maps, NodeLists.

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

//Looping over an array
const cars = ["BMW", "Volvo", "Mini"];

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

//Looping over a string
let language = "JavaScript";

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

While Loop

While loop loops through a block of code as long as a specified condition is true.

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

Example

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

Don't forget to increase the variable used in the condition, the loop will never end. This will crash the 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.

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

Example

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

In this example 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.

Again, don't forget to increase the variable used in the condition, otherwise the loop will never end!

Page source and examples: W3Schools