LESSON LIST

Loops in Javascript

JavaScript supports different kinds of loops:
     for - loops through a block of code a number of times
     for/in - loops through the properties of an object
     while - loops through a block of code while a specified condition is true
     do/while - also loops through a block of code while a specified condition is true

The For Loop

The for loop consists of three statements

Syntax:

for (statement 1; statement 2; statement 3) {
    code block
}

Example:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
    text +=  i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Output:


    
        <script>
/*Javascript program to print the number pyramid of height n(input from user) using a single variable in entire program
for 3
1
11
111
Input
enter pyramid height:5
Output
1
11
111
1111
11111
*/
msg= "enter pyramid height:";
num=prompt(msg);
var i,p;
//as we use only one variable i.e i
//power of 10 -1 = largest number in its digit space
//e.g 1000-1=999 =>999/9=111
for(i=0;i<num;i++)
{
 p=(10**(i+1)-1)/9;
 document.write(p);
 document.write("</br>")
}
</script>

        Try

The For/In Loop

The for/in loop iterates through the properties of an object.

Example:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25}; 
var x;
for (x in person) {
    txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

Output:

John Doe 25

The while loop

The while loop keeps iterating through a block of code till the condition specified along with while is false.

Syntax:

while (condition) {
    code block to be executed
}

Example:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
	<script>
	var text = "";
	var i = 0;
	while (i < 5) {
	    text += "<br>" + i;
	    i++;
	}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Output:

The condition is first evaluated. If true, the block of statements following the while 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 number++ 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.

The Do/While Loop

The do-while loop is a variant of the while loop. The code block present in do is executed once after which the conditional statement in while is evaluated. This process keeps recurring till the stated condition in while becomes false

Syntax:

do {
    code block to be executed
}
while (condition);

Example:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
	var text = ""
	var i = 0;
	do {
	    text += "<br>" + i;
	    i++;
	}
	while (i < 5);  
	document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Output:

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 do-while loop is executed at least once whereas the while loop may not execute at all. The do-while 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.

Break statement

When javascript comes across break statement during the execution of a loop, it stops the execution of both the iteration and loop immediately. When javascript comes across continue statement during the execution of a loop, it stops the execution of the ongoing iteration and goes on to execute the next iteration.

Break Example:

var sum = 0; for (var i = 1; i <= 10000; i++) { sum += i; if (i === 50) { break; // immediately transfers control outside the for block } } alert("Sum = " + sum); // => Sum = 1275

Continue statement

When JavaScript encounters a continue 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.

Continue Example:

for (var i = 1; i <= 10; i++)
{
   if ((i % 2) != 0) {
      continue;
   }
   alert(i);           // => 2, 4, 6, 8, 10
}