Loops in JavaScript: Loops are used to execute a specific piece or block of code repeatedly until the given condition is satisfied.

What is a Loop?

Almost all loops contain a certain process and this process is defined by the users according to their requirements. For example, the following processes can be defined by the users in a loop:

  • Fetching values from an array
  • Performing some operations on the values of an array
  • Checking a given condition such as the given maximum counter/number is reached or not.

The basic idea behind the creation of a loop is to automate the repetitive operations inside the program to reduce the size of code as well as to save time.

Types of Loops in JavaScript

There are basically five types of loops in the JavaScript that are as follows:

  1. While
  2. Do.. While
  3. For
  4. For…in
  5. For…of

Let’s understand each type of the loop with help of an example.

  1. While Loop:-

It is one of the easiest looping statements in the JavaScript language.

A block of code in the “while” looping statement is executed continuously until the given condition becomes false. We can also say that as long as the given condition evaluates to true, the block of code keeps executing.

Let’s see, how the “while loop” works with help of a diagram:

Javascript loop

Syntax of While Loop statement

Note: Remember one thing that you must use conditions that must be false on a certain point, Otherwise your looping statement will keep executing for the infinite number of times.

Example

Program

In the above program, we have used a “while” loop statement to print the integers from 0 to 9. In the place of condition, we have used an expression (i<=9);

Do..while Loop statement

The “do-while” loop statement is an extended version of the “while” loop statement in which the condition checking process is placed at the end of the loop statement.

Another thing that separates the “while” loop from the “do … while” loop is that a block of “do..while” loop code runs for at least one time, even if the given condition gets false in the first attempt.

Let’s see, how the “Do…while loop” works with help of a diagram:

Javascript loop

Syntax of “Do..While” loop statement

Let’s understand this in more detail with the help of an example:

Program

In the given program, we have defined a “do..while” loop for printing integers 0 to 4. When the counter of the “do..while” loop exceeds the specified value (4), the condition becomes false, and the execution of the loop statement gets terminated.

Output

Let’s see another example in which condition is false in first attempt.

Javascript loop

Program

In the above program, we have defined a “do…while” loop to print integers but in the condition checking part, we have mentioned the value (i<0), which is already false. Let’s see what happens when the condition gets false in the first try.

Output

Javascript loop

We get (0) output in the above program, because as we have already discussed that the code block given in the “Do…While” loop is executed at least for once. It does not matter whether the condition is getting right or wrong at first.

For Loop Statement

In the “for” loop statement, a block of code keeps executing until the given specific condition becomes false. It is typically used to run a set of instructions for a particular number of times.

Let’s see, how the “For loop” works with help of a diagram:

Javascript loop

You can understand the “For” loop statement more easily by seeing the syntax given below:

  1. Statement A:- In this statement, the initial condition is defined that is executed only once before the execution of the block of code given in the curly braces.
  • Statement B:-In this statement, the final condition(like “a<4”) has been  defined, and the code block given in the curly brace is executed repeatedly until this condition becomes false.
  • Statement c:-The condition/expression given in it (egi ++, i–) is executed on every iteration.

For Example

As we can see, the statement A defines a variable “a = 0” before starting the loop. Statement B defines the specific condition and the given code block gets executed until this condition become false.

Statement C makes increment (of +1) in the value on every iteration.

Let’s understand “for” loop statement with the help of a program:

Program

In the above-given program, we have defined a “for” loop statement to print the values of the array “colors”.

Output

Javascript loop

For…In Loop Statement

In JavaScript, the “For…In” loop is a different kind of Looping statement. It loops through the elements of the arrays, or properties of the object. We can also say that it iterates on the elements of the arrays or properties of the object.

Syntax of For…In Loop Statement

Note: One important thing in “for…in “ loop statement is that the value of the counter is not in the form of integers but it is given in the form of string.

Example

Program

In above program, we have defined the “for..in” statement to print the properties of object and element of the object.

Output

Javascript loop

It is also possible to loop through the elements of the array using “for…in” loop as shown in the given program

Example

Porgram

In the above program, we have defined the for…in loop to print the values of the given array.

Output

Javascript loop

For…of Loop statement

You can use the “for…of” loops over all iterable objects such as strings or arrays. This “for…of “ loop statement was introduced in the javascriptES6.

The generic syntax of “for…of” loop statement

In the variable, the value of the next property is assigned to the variable for each iteration.

Iterable- These are objects that have iterable properties.

Let’s understand for…of looping statement with help of an example:

Program

In the above program, we have used the for…of looping statement of the JavaScript ES6.

First, we have created a string (e.g., var/let msg=”Hello World!”), to print this, we defined for..of loop (e.g., “for(var character of msg)”, in which we created another variable (e.g., var/let character) to print the characters of the string.

Output

Javascript loop

Note: We cannot use the for…of looping statement for the non-iterable objects, but if we want to iterate the properties of a non-iterable object, we can use the for…in looping statement.

Pin It on Pinterest

Share This