What is loop in JavaScript with example?

Question

Loops are useful when you have to execute the same lines of code repeatedly, for a specific number of times or as long as a specific condition is true. Suppose you want to type a ‘Hello’ message 100 times in your webpage. Of course, you will have to copy and paste the same line 100 times. Instead, if you use loops, you can complete this task in just 3 or 4 lines.

Table of Contents Show

Different Types of Loops
do…while loop
What is loop in JavaScript?
What is loop and its example?
What are the 3 types of loops?
What is loop () used for?

Different Types of Loops

There are mainly four types of loops in JavaScript.

for loop
for/in a loop (explained later)
while loop
do…while loop

for loop

Syntax:

for(statement1; statement2; statment3)

{

lines of code to be executed

}

The statement1 is executed first even before executing the looping code. So, this statement is normally used to assign values to variables that will be used inside the loop.
The statement2 is the condition to execute the loop.
The statement3 is executed every time after the looping code is executed.

Try this yourself:

<html>
<head>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		document.write("<b>Using for loops </b><br />");
		for (i=0;i<students.length;i++)
		{
		document.write(students[i] + "<br />");
		}
	</script>
</head>
<body>
</body>
</html>

while loop

Syntax:

while(condition)

{

lines of code to be executed

}

The “while loop” is executed as long as the specified condition is true. Inside the while loop, you should include the statement that will end the loop at some point of time. Otherwise, your loop will never end and your browser may crash.

Try this yourself:

<html>
<head>
	<script type="text/javascript">
		document.write("<b>Using while loops </b><br />");
		var i = 0, j = 1, k;
		document.write("Fibonacci series less than 40<br />");
		while(i<40)
		{
			document.write(i + "<br />");
			k = i+j;
			i = j;
			j = k;
		}
	</script>
</head>
<body>
</body>
</html>

do…while loop

Syntax:

do

{

block of code to be executed

} while (condition)

The do…while loop is very similar to while loop. The only difference is that in do…while loop, the block of code gets executed once even before checking the condition.

JavaScript Loops are used to repeatedly run a block of code - until a certain condition is met. When developers talk about iteration or iterating over, say, an array, it is the same as looping.

JavaScript offers several options to repeatedly run a block of code, including

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9,

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

0,

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 and

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

2. Here is an example of a JavaScript

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9 loop.

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

Run

The condition is first evaluated. If true, the block of statements following the

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9 statement is executed. This is repeated until the condition becomes false. This is known as a pre-test loop because the condition is evaluated before the block is executed.

The

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

5 statement is called the updater. Removing it will result in an infinite loop. You must always include a statement in a loop that guarantees the termination of the loop or else you'll run into this problem.

Next is an example of a JavaScript

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

0 loop:

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

Run

The block following do is executed first and then the condition is evaluated. If the while condition is true, the block is executed again and repeats until the condition becomes false. This is known as a post-test loop as the condition is evaluated after the block has executed.

The

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

0 loop is executed at least once whereas the

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9 loop may not execute at all. The

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

0 is typically used in a situation where the body of a loop contains a statement that generates a value that you want to use in your conditional expression, like this:

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

The most frequently used loop in JavaScript is the

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 loop. Here is an example:

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

Run

It consists of three parts, separated by semicolons. The first is the initializer (var i = 1) which initializes the loop and is executed only once at the start. The second is a test condition (i <= 50). When a conditional expression evaluates to true, the body of the loop is executed. When false, the loop terminates. The third part is an updater (i++) which is invoked after each iteration. The updater typically increments or decrements the loop counter.

In a

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 loop, all three parts i.e. initializer, test condition, and updater are written together in a single line (called an iteration statement), whereas in a

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9, they're scattered and lie at different places. This makes a

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 loop more readable than a

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9 loop and as a result, more easily maintainable.

So when do we use

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 and when

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9? If the number of iterations is known use the

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 loop. If you want to loop until a certain condition is met use the

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9 loop.

A

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

2 loop iterates through the properties of an object and executes the loop's body once for each enumerable property of the object. Here is an example:

var student = { name: "Bill", age: 25, degree: "Masters" };

for (var item in student) {
    console.log(student[item]);     // => "Bill", then 25, then "Masters"
}

var student = { name: "Bill", age: 25, degree: "Masters" };

for (var item in student) {
    console.log(student[item]);     // => "Bill", then 25, then "Masters"
}

Run

With each iteration JavaScript assigns the name of the property (a string value) to the variable item. In the example above these are:

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

0,

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

1, and

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

2.

Note that

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

2 loops also return properties and methods that are inherited through the prototype chain. An easy way to skip properties and functions that are not part of the object itself use the built-in

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

4 method.

var Student = function (name) {
    this.name = name;
}

Student.prototype.age = 38;

var student = new Student("Carl");

for (var item in student) {
    if (student.hasOwnProperty(item)) {
        console.log(student[item]);        // => Carl. age is not displayed
    }
}

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

0Run

We have not discussed objects yet, but the student object has a

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

0 property on the object itself. Its prototype object has an

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

1 property. The

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

2 loop iterates over all properties, but the

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

4 ensures that the

do {
    // read a character from keyboard in the body 
} while (if ch === '0');     // => terminate loop if '0' is entered

1 property on the prototype does not get displayed because it is not student's own property.

When JavaScript encounters a

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

0 statement in a loop it immediately exits the loop without executing any other statements in the loop. Control is immediately transferred to the statement following the loop body. Here is an example:

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

1

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

2Run

When an infinite loop is created intentionally, you can use a

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

0 statement to controls termination of the loop, like so:

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

3

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

4Run

The

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

2 statement won't be executed when the loop is entered for the 50th time.

When JavaScript encounters a

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

3 statement in a loop it stops the execution of the current iteration and goes back to the beginning of the loop to begin the next iteration. The example below displays only even numbers.

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

5

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

6Run

The

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

3 statement can also be used in other loops. However, in a

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 loop it behaves differently from when used in a

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9 loop. In the example above, the

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 loop first evaluates the i++ expression and then tests the i <= 50 condition. Now, consider the

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9 loop:

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

7

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

8Run

When the

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

3 statement is executed, the control is returned directly to the while (number <= 50) test condition and the number++ expression is not evaluated, thus causing an infinite loop. The lesson here is that you cannot simply replace a

var sum = 0;
var number = 1;

do {
    sum += number;         // -- body
    number++;              // -- updater
} while (number <= 50);    // -- condition

console.log("Sum = " + sum);    // => Sum = 1275

1 loop with a

var sum = 0;
var number = 1;

while (number <= 50) {     // -- condition
    sum += number;         // -- body
    number++;              // -- updater
}

console.log("Sum = " + sum);  // => Sum = 1275

9 loop; you have to be careful especially when a

var sum = 0;

for (var i = 1; i <= 50; i++) {
    sum = sum + i;
}

console.log("Sum = " + sum);    // => Sum = 1275

3 statement is involved.

What is loop in JavaScript?

Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions typically return true or false . A loop will continue running until the defined condition returns false .

What is loop and its example?

A "For" Loop is used to repeat a specific block of code a known number of times. For example, if we want to check the grade of every student in the class, we loop from 1 to that number. When the number of times is not known before hand, we use a "While" loop.

What are the 3 types of loops?

Loops are control structures used to repeat a given section of code a certain number of times or until a particular condition is met. Visual Basic has three main types of loops: for.. next loops, do loops and while loops.

What is loop () used for?

Loops allow you to repeat a process over and over without having to write the same (potentially long) instructions each time you want your program to perform a task.