1. JavaScript Loops
All the programming languages supports Loops. Loops run the block of code repeatedly to achieve some goal. For example, let us say you have 1000 students’ height in an array, and you want to calculate average student height. Here, a loop is required to read each student’s height and perform a running count. At the end of the loop, we can calculate the average as we have total height and total number of students. In these JavaScript examples, we will learn the looping techniques.
2. While Loop
In JavaScript, we can use while loop with a condition. The block of code which acts as the body of the loop will run when the condition evaluates to the boolean true. Now, have a look at the below example:
1) The prompt function gets user input to know how many times to run the loop. The received input is stored in the variable N1. Later, we convert it to number format in the next statement.
2) The
while keyword expects a condition which is in the parenthesis. Here the condition is x <= N1. The variable N1 is holding the user input and x is one for the very first time. Our condition will evaluate to true when x is less than or equal to user given input N1. Script execution moves to the body of the while loop when the conditional statement (x <= N1) returns true.
3) Inside the while loop body, we increment the value of x by one. After this, the condition will be evaluated again to decide to continue executing the loop body or not.
4) While running the example, let us assume the user gave the input as 12. Now, the while loop runs for 12 times and print the output in the browser window.
3. For Loop
Like while loop, for loop also runs the block of code one or more time. The below example shows the usage of the for loop in JavaScript:
1) This part is called for loop initializer. In our case, we initialize the variable x to 1. This statement will be executed once when the code flow enters the for loop.
2) The second part of the for loop is the Loop Condition. The code flow enters here after the initialization (x=1). The code flow also enters here after running the last statement in the loop body. When this condition evaluates to true, the code- flow enters the for-loop body.
3) After running the last statement in the for-loop body and before entering the conditional statement, this expression here will be evaluated.
4) We get a similar output for the user input of 12. It shows that you can use either while loop or for loop for running the repeated piece of code.
4. Breaking From A Loop
The break statement will force the execution to come out of the loop. One can use this statement inside any loop and below is the example of a break in the For Loop:
1) The
For Loop, which runs based on the user input. In our previous example, we take user input and store that in a variable N1. While asking for the input; we request the user to enter a number 10 and 100 (Refer Section 2).
2) During the 10th iteration, we make a call to the
break statement. This will end the loop abruptly and the control goes to the first statement, which is outside the end of the loop.
3) When the user enters a number between 10-100, the loop will always print 1-9 numbers because of the break statement.
5. Loop – continue Statement
Unlike the break statement, the continue statement will skip remaining statement(s) in the loops and evaluates condition for the next iteration. Now, have a loop at the below code:
1) The same For Loop which we used in the past examples.
2) Here, we do modulus division. When the number is odd number, the execution reads the continue statement and skips the loop body. The flow does not quit the loop but continues to execute the expression for the next iteration.
3) Because of the continue statement, we print only the even numbers.
6. JavaScript For…In Loop
The
For..In loop in JavaScript is useful for iterating over the array without need to check the upper bound. In the below example, the for..in loop iterates the array called Persons.
1) Here, we create an array called Persons. This array initially contains three elements, and we added one element using the statement Persons[3] = “Jenni”.
2) Here, we use the For & In loop. Inside the parenthesis, we provide the array name, Persons. The
in key word assigns an index number into the variable index. Here, we no need to worry about the size of the array as the For & In Loop will take care of it.
3) The output shows the loop successfully iterated over all the elements in the Persons array.
7. Code Reference – Loops
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html> <html lang="en"> <head> <title>Loops in JavaScript</title> </head> <body> <script> //Sample 01: Read Loop End from User var N1 = prompt("Enter Loop End (between 10 - 100):"); N1 = parseInt(N1, 10); if (N1 < 10 || N1 > 100) { N1 = 100; } //Sample 02: While Loop var x = 1; while(x <= N1) { document.writeln("While Loop Counter " + x); document.writeln("</br>"); x++; } //Sample 03: For Loop for (x=1; x <= N1; x++) { document.writeln("For Loop Counting " + x); document.writeln("</br>"); } //Sample 04: Break Example document.writeln("<i>break example </i>"); for (x=1;x <= N1; x++) { if ( x == 10) { break; } document.writeln(x + "-"); } document.writeln("</br>"); //Sample 05: Continue Example document.writeln("<i>continue example </i>"); for (x=1;x <= N1; x++) { if ( x % 2 == 1) continue; document.writeln(x + "-"); } document.writeln("</br>"); //Sample 06: For In Loop document.writeln("<i>For In Example </i></br>"); var Persons = ["Raman", "Kumar", "Joseph"]; Persons[3] = "Jenni"; for(var index in Persons) { document.writeln("Persons[" + index + "] = " + Persons[index]); document.writeln("</br>"); } </script> </body> </html> |
Categories: JavaScript
Tags: Break, Continue, For Loop, For..In Loop, While Loop
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.