Loops In JavaScript

A Loop is a block of code used in to perform repeated tasks based on a condition. These conditions normally return a boolean value (true or false) and the loop will continue running until the defined condition returns false.

Let's say you're tasked to write the number 1-100, you can either do this manually (which will definitely take a long time) or you can automate the process using a loop as shown below:

for ( i = 0; i <= 100; i++) {
    console.log(i);
}

/**
for (initialization; condition; iteration) {
    action
}
*/

There are various types of loops we can utilize in JavaScript. These loops fundamentally do the same thing, although their syntax and implementation are slightly different.

1. while Loop

2. do...while Loop

3. for Loop

4. for...in Loop

5. for...of Loop

I'll be explaining the syntax of the various Loops and their implementations while using real-life examples. Let's go.

The** while Loop**

The while loop is a rather simplistic loop and its syntax is like so:

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

The condition used above is a boolean value that has to remain unsatisfied for the loop to keep running. Once the condition is met, the loop stops.

Let us apply this concept using the example below:

let bottles = 10;

while(bottles > 0) {
 "There are ${bottles} green bottles standing on the wall and if
one green bottle accidentally falls down, there'll be ${bottles-1} 
green bottles standing on the wall."
}

The output of this code loop is the Nursery Rhyme " Ten Green Bottles standing on the Wall"

The do...while Loop

This loop is similar to the while loop. The only difference being that the condition comes after the block of code to be executed. Its syntax is as follows

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

Now let's apply it to the nursery rhyme example we used earlier

let bottles = 10;
do {
 "There are ${bottles} green bottles standing on the wall and if
one green bottle accidentally falls down, there'll be ${bottles-1} 
green bottles standing on the wall."
} while ( bottles > 0)

The for Loop

This loops through a block of code a number of times. The syntax is as follows

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

• Initialization: This sets the values of the variable parameters before the loops starts.

• Condition: This is a boolean statement that has to be satisfied for the loop to keep on going. Once it satisfies the condition, the loop ends.

• Iteration: This defines what the code is meant to do after each iteration of the the loops or after each loop cycle. Let's apply this concept using to the example we used earlier.

for(let bottles = 10; bottles > 0; bottles-- ) {
"There are ${bottles} green bottles standing on the wall and if
one green bottle accidentally falls down, there'll be ${bottles-1} 
green bottles standing on the wall."
}

The for...in Loop

This loop is used to iterate over the properties of Objects and Arrays. Its syntax is as follows:

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

Let's apply this concept with the example below

Let's create an object first, as the loop will be used to loop over it.

const country = {
  name: "Nigeria",
  population: "200m",
  president: "Buhari"
};

Now using the for loop, we'll iterate through this object and display its properties like so:

for ( let key in country ) {
    console.log(`${key} = ${country[key]}`);
}

The output of this loop will returns each key value pair of the object as follows:

name = Nigeria
population = 200m
president = Buhari

Hope you understood this example, for practice, try to use the for...in loop to loop over the properties of an array.

The for...of Loop

The for...of loop is used to loop through the values of an iterable object.

It lets you loop over iterable data structures like Arrays, Strings, Maps, NodeLists, and more. The syntax of the for...of loop is as follows:

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

Let's apply this syntax to an example. In this case we'll be looping over a Map of Roman Numerals. First, let's define the Map.

const romanNumerals = new Map();
romanNumerals.set(1, "I").set(2, "II").set(3, "III").set(4, "IV").set(5, "V");

Now to iterate over each property, we apply the concept of the for...of loop like so:

for(const [key, value] of romanNumerals.entries()) {
  console.log(`${key} in Roman Numerals is  ${value}`);
}

The output of this loop will be as follows :

1 in Roman Numerals is I
2 in Roman Numerals is II
3 in Roman Numerals is III
4 in Roman Numerals is IV
5 in Roman Numerals is V

Note: The entries() method is used to access both the key and value of a map property. We can access only the keys using key() method and we can also access only the values using the value() method.

Loops are very important in programming and no matter the language you use, you'll always need them in your code.

I hope this article helped you understand the various loops in Javascript. If you have any suggestion, do well to indicate in the comment section or reach out to me on twitter.

Thanks for reading and Happy Coding.