Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JavaScript 008 – Loops For, While, For…In

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:

JavaScript While Loop Example
JavaScript While Loop 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:

JavaScript For Loop Example
JavaScript For Loop Example

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:

JavaScript Loop Break Example
JavaScript Loop Break Example

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:

JavaScript Loop Continue Example
JavaScript Loop Continue Example

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.

JavaScript For..In Loop Example
JavaScript For..In Loop Example

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

Categories: JavaScript

Tags: , , , ,

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.