JavaScript Loops

A loop is control flow statement that helps you run the same code repeatedly until it fulfils the specified test condition. Looping helps you automate the repetitious processes and save your effort and time.

There are five type of loops in JavaScript – while, do… while, for, for…in, and for…of.

While Loop: The while loop runs a block of code until the specified test condition is fulfilled. As the while loop evaluates to true, the loop is terminated.

Syntax:

while(condition) {

// Code

}

Example:

var a = 1;

while(a <= 20) {

 	document.write(+ a + "</p>");

 	a++;

}

In the above example, the loop will run when the value of variable a <=20. Also, the value increases by 1 each time.

Tip: Always specify a condition that evaluates to false in the while loop. Else the loop will never end which is called an infinite loop.

Do…while loop: The do…while loop tests the condition at the end of each loop iteration. It runs a code block followed with evaluation of the condition. If the condition returns true, the code block is run repeatedly until it evaluates to false.

Syntax:

do {

// Code to be executed

}

while(condition);

Example:

var a = 1;

do {

document.write(+ a + "</p>");

a++;

}

while(a <= 20);

What is the difference between a while and do while statement?

In a while loop, the test condition is checked initially in every loop iteration. So if the condition is false, the code block is never executed. However, in do while statement, the code block will run once even if the test condition is false. Here, the test condition is tested at the end of the loop iteration.

For Loop: The for loop runs a code block repeatedly when a test condition is fulfilled. This loop proves helpful when you want to run the same code again and again.

Syntax:

for(initialization; condition; increment) {

// Code to be executed

}

Here,

initialization — Allows you to initialize the counter variables

condition — Tested at the starting of each iteration and gives a true or false output.

increment — Changes the loop counter with a new value every time the loop is executed.

Example:

for(var a=1; a<=20; a++) {

 	document.write( + a + "</p>");

}

You can use for loop to iterate over an array. Here’s how:

var course = ["English", "Maths", "EVS", "Hindi", "Computer"]; 

// Loop through all the elements in the array

for(var a=0; a<course.length; a++) {

  document.write("<p>" + course[a] + "</p>");

}

For…in loop: The for-in loop repeats over the properties of an object. The variable you specify in this loop is a string that has the name of the active property.

Syntax:

for(variable in object) {

// Code to be executed

}

Example:

var details = {"name": "George", "class": "4", "age": "11"};

for(var prop in details) { 

document.write("<p>" + prop + " = " + details[prop] + "</p>");

}

For…of Loop: The for…of loop helps you iterate over arrays. It runs the code for every element of the object that is iterable.

Example:

let var = "JavaScript";

for(let c of var) {

console.log(c); // J,a,v,a,S,c,r,i,p,t

}