Loops in JavaScript
Unit 2
These are the different loops:
• while loop
• do while loop
• for loop
• Nested loops
while loops
The first loop we will discuss is the while loop. A while loop executes a certain block of code as long
as an expression evaluates to true. The snippet below demonstrates the syntax of the while loop:
while (condition) {
// code that gets executed as long as the condition is true
}
The while loop will only be executed as long as the condition is true, so if the condition is false to
begin with, the code inside will be skipped.
Here is a very simple example of a while loop printing the numbers 0 to 10
(excluding 10) to the console:
let i = 0;
while (i < 10) {
[Link](i);
i++;
}
These are the steps happening here:
1. Create a variable, i, and set its value to zero
2. Start the while loop and check the condition
that the value of i is smaller than 10
3. Since the condition is true, the code logs i and
increases i by 1
4. The condition gets evaluated again; 1 is still
smaller than 10
5. Since the condition is true, the code logs i and
increases i by 1
6. The logging and increasing continues until i
becomes 10
7. 10 is not smaller than 10, so the loop ends
do while loops
In some cases, you really need the code block to be executed at least once. For
example, if you need valid user input, you need to ask at least once. The same goes
for trying to connect with a database or some other external source: you will have
to do so at least once in order for it to be successful. And you will probably need to
do so as long as you did not get the result you needed. In these cases, you can use
a
do
while loop.
Here is what the syntax looks like:
do {
// code to be executed if the condition is true
} while (condition);
It executes what is within the do block, and then after that it evaluates the while. If the condition is
true, it will execute what is in the do block again. It will continue to do so until the condition in the
while changes to false.
We can use the prompt() method to get user input. Let's use a do while loop to ask the user for a
number between 0 and 100.
let number;
do {
number = prompt("Please enter a number between 0 and 100: ");
} while (!(number >= 0 && number < 100));
It asks three times, because the first two times the number was not between 0 and
100 and the condition in the while block was true. With 34, the condition in the while
block became false and the loop ended.
for loops
for loops are special loops. The syntax might be a little bit confusing at
first, but you
will find yourself using them soon, because they are very useful.
Here is what the syntax looks like:
for (initialize variable; condition; statement) {
// code to be executed
}
Between the parentheses following the for statement, there are three parts,
separated by semi-colons. The first one initializes the variables that can be used in the
for loop.
The second one is a condition: as long as this condition is true, the loop will keep on
iterating. This condition gets checked after initializing the variables before the first
iteration (this will only take place when the condition evaluates to true). The last one
is a statement. This statement gets executed after every iteration. Here is the flow of a
for loop:
1. Initialize the variables.
2. Check the condition.
3. If the condition is true, execute the code block. If the condition is false, the
loop will end here.
4. Perform the statement (the third part, for example, i++).
5. Go back to step 2.
This is a simple example that logs the numbers 0 to 10 (excluding 10) to
the console:
for (let i = 0; i < 10; i++) {
[Link](i);
}
It starts by creating a variable, i, and sets this to 0. Then it checks
whether i is smaller than 10. If it is, it will execute the log statement.
After this, it will execute i++ and increase i by one.
The condition gets checked again. And this goes on until i reaches a
value of 10. 10 is not smaller than 10, so the loop is done executing and
the numbers 0 to 9 have been logged to the console.
Nested loops
Sometimes it can be necessary to use a loop inside a loop. A loop inside a loop is
called a nested loop. Often it is not the best solution to the problem. It could even
be
a sign of poorly written code (sometimes called "code smell" among programmers),
but every now and then it is a perfectly fine solution to a problem.
Here is what it would look like for while loops:
while (condition 1) {
// code that gets executed as long as condition 1 is true
// this loop depends on condition 1 being true
while (condition 2) {
// code that gets executed as long as condition 2 is true
}
}
Let’s create a JavaScript program in which we will display values of
the inner for loop for each outer iteration, as well as outer for loop.
Printing Tables
Let’s create a JavaScript program to print tables using nested for loop.