Everything You Need To Know About JavaScript Loops

Now it’s the perfect time to continue our JavaScript series and learn about JavaScript Loops.

Types Of JavaScript Loops

JavaScript loops as you may guess are used to execute the same block of code again and again while a certain condition is met. The basic idea of a loop is to automate the repetitive tasks within a program to save you some time and effort. JavaScript supports five different types of loops:

• while – loops through a block of code as long as the condition becomes true.
• do…while – loops through a block of code once, then the condition is evaluated. If the condition is true, the statement is repeated as long as the specified condition is true.
• for – loops through a block of code until the counter reaches a specified number.
• for…in – loops through the properties of an object.
• for…of – loops over objects such as arrays, strings, etc.

How To Use While Loop In JavaScript

While loop is the simplest looping statement in JavaScript.

While loop loops through a block of code as long as the specified condition becomes true. As soon as the condition returns false, the loop is stopped. Here is how the syntax of the while loop looks:

while(condition) {
    // Code to be executed
}

Here is a simple example of a loop that will continue to run as long as the variable i is less than or equal to 5. The variable i will increase by 1 every time the loop runs:

let i = 1;
while(i <= 5) {    
    console.log("<p>The number is " + i + "</p>");
    i++;
}

How To Use The do…while Loop In JavaScript

The do…while loop is a variation of the while loop, it evaluates the condition at the end of each loop iteration. With do…while loop the block of code is executed once and then the condition is evaluated. If the condition is true, the loop is repeated. Syntax of do…while loop looks like this:

do {
    // Code to be executed
}
while(condition

Here is an example of a JavaScript code that defines a loop that starts with i=1. It will then print the output and increase the value of variable i by 1. After that the condition is checked, and the loop will continue to run as long as i is less than or equal to 5.

let i = 1;
do {
    console.log("<p>The number is " + i + "</p>");
    i++;
}
while(i <= 5);

The difference between while and do…while loops is that do…while runs at least one time, even if the condition is false, because it checks it after the first loop, not before it.

How To Use For Loop In JavaScript

It is safe to say that for loop is the most commonly used loop in perhaps any programming language. The for loop repeats a block of code as long as a certain condition is true. Here’s how the syntax of for loop looks:

for(initialization; condition; increment) {
    // Code to be executed
}

Here’s what the parameters of the for loops mean:

• initialization — it is used to initialize the counter variables, and evaluated once unconditionally before the first execution of the body of the loop.
• condition — it is evaluated at the beginning of each iteration. If it evaluates to true, the loop statements execute. If it evaluates to false, the execution of the loop ends.
• increment — it updates the loop counter with a new value each time the loop runs.

Let’s look at the example of a loop that starts with i=1 and continues until i is less than or equal to 5:

for(let i=1; i<=5; i++) {
    console.log("<p>The number is " + i + "</p>");
}

The for loop is useful for iterating over an array. The following example shows you how to print each item or element from a JavaScript array:

let fruits = ["Apple", "Banana", "Mango", "Orange", "Lemon"];
 
// Loop through all the elements in the array 
for(let i=0; i<fruits.length; i++) {
    console.log("<p>" + fruits[i] + "</p>");

How To Use for…in Loop In JavaScript

The for…in loop is a type of loop that iterates over the properties of an object or the elements of an array. The syntax of the for…in loop looks like this:

for(variable in object) {
    // Code to be executed
}

As you can see the loop counter in the for…in loop is a string, not a number. It contains the name of the current property or the index of the array element.

Here’s an example that shows you how to loop through all the properties of a JavaScript object:

// Your object 
let person = {"name": "Simply", "surname": "WebStuff", "age": "31"};
 
// Loop through all the properties in the object  
for(let item in person) {  
    console.log("<p>" + item + " = " + person[item] + "</p>"); 
}

As I mentioned you can loop through the elements of an array. Just like this:

// Your array
let fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(let item in fruits) {  
    console.log("<p>" + fruits[item] + "</p>");
}

How To Use for…of Loop In JavaScript

ES6 introduced a new for…of loop which allows you to iterate over arrays or for example strings etc. Also, the code inside the loop is executed for each element of the object.

Let’s look at the example that shows you how to loop through arrays and strings using this loop:

// Your array
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// Your string
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

Keep in mind that for…of the loop does not work with objects because they ar not iterable. If you want to iterate over the properties of an object you can use the for..in loop.