Introduction to Loops

Repetition

The repetition of an instruction or a group of instructions is a commonly encountered phenomenon in programming called a loop. As an example, say we want our program to perform the following tasks:

• To read a document or data file line by line repeatedly until the end of the file.

• To draw an image pixel by pixel repeatedly using color values that show it on the screen.

• To iterate through a collection of variables one by one to process its values.

• To compute a result by applying a formula to several values.

The for–of loop

Let’s say we want to display integers from $0$ to $4$. We can simply display the numbers $0$ to $4$ one by one using the console.log() statement. We can also use one variable and log its value repeatedly by changing the value of the variable, as shown below:

The code above clearly shows the repetitive use of console.log(a);. The benefit of using a single variable is that we can convert this repetition into a for loop. In JavaScript, we use a for loop to perform a process repeatedly for a fixed number of iterations. Let’s demonstrate this in the following program:

The for loop causes lines 1 and 2 to be repeated five times. So, we can say the loop has five iterations.

In the code above:

• We use a as a variable that takes the values provided by the of operator.

• The operator, of, picks the values from [0, 1, 2, 3, 4] one by one at each iteration.

• The body of the loop contains only one statement, console.log(a);.

Note: We use curly braces { and } to enclose body of the loop. If there is only one statement in the body of the loop, then curly braces are not needed.

There are only two repeatable lines in the loop, but when we unfold the loop and write out each step as it happens, there are ten execution steps. The loop iterates all values enclosed in the square brackets to execute each statement in the body of the loop.

Let’s take an example of generating the first five non-negative even numbers—0, 2, 4, 6, and 8.

In the code above, the curly brackets enclosing lines 2 and 3 show that these lines are the body of the loop.

Simple loops practice

The following are a few example programs to practice writing for loops in JavaScript. The “Show Solution” button will provide one possible program that solves the respective problem. You can copy and paste the given solution into the code widget to execute it. It helps to verify that your solution’s output matches the given solution. There might be several ways of writing correct solutions in programming.

Odd numbers

Write a program that shows the first five odd numbers $1$,$3$,$5$,$7$, and $9$.

If you need a hint, asking the AI mentor is a good idea.

Arithmetic sequence

An arithmetic sequence is an ordered set of numbers that have a common difference between each consecutive term.

Write a program that shows the first five terms of the arithmetic sequence $0$, $5$, $10$, $15$, and $20$.

Harmonic sequence

A harmonic sequence is an ordered set of numbers that have a common difference between the reciprocals of each consecutive term.

Write a program that shows the first five terms of the harmonic sequence $1/2$, $1/4$, $1/6$, $1/8$, and $1/10$.

Geometric sequence

A geometric sequence is an ordered set of numbers that have a common multiplier between each consecutive term.

Write a program that shows the first five terms of the geometric sequence $1$, $3$, $9$, $27$, and $81$.