Nested Loops

Nested loop

When we use a loop inside another loop, we call them nested loops. The first loop is called the outer loop, and the second loop is called the inner loop. Nested loops may be the same type or different types of loops. Both loops may be for loops or while loops. The outer loop may be a for loop and the inner loop a while loop, or vice versa.

Let’s use the Cartesian product of two sets to illustrate nested loops.

Cartesian product

The Cartesian product of the sets $A = \{a,b,c\}$ and $B = \{1,2,3\}$ is $A \times B = \{(a,1),(a,2),(a,3),(b,1),(b,2),(b,3),(c,1),(c,2),(c,3)\}$. This can be achieved in programming with the help of two nested for loops. The outer loop iterates through the elements of the first set, and the inner loop iterates through the elements of the second set against each element of the first set.

There are a few new things in the code above that we need to understand.

• The outer for loop iterates the values, ['a', 'b', 'c'], one by one, storing a value to the variable e at each iteration of this loop.

• The next statement is also a for loop, which is in the body of the outer loop.

• This inner for loop iterates the values, [1, 2, 3], one by one, storing a value to the variable, m, at each iteration.

• The next statement is console.log('(' + e + ', ' + m + ')'), which is in the body of the inner loop. The value of e remains a for all values of m in the inner loop. Therefore, the program outputs (a, 1), (a, 2), and (a, 3).

• Then, the inner loop terminates, and the control goes to the next iteration of the outer loop.

• Now, the value of e is b. The inner loop starts again and outputs (b, 1), (b, 2), and (b, 3).

• Then, the inner loop terminates again, and the control goes to the next iteration of the outer loop.

• Now, the value of e is c. The inner loop restarts and outputs (c, 1), (c, 2), and (c, 3).

Practice nested loops

The following are a few example programs that can help you practice writing nested loops. By clicking the “Show Solution” button, you’ll find a program that solves the respective problem. You can copy and paste the given solution into the code widget to make sure the output of your solution matches the given solution. There may be several ways to write correct solutions in programming.

Remember The “Run” button becomes the “Stop” button when we run the code. We have to click the “Stop” button to edit the code. We can re-run the code by clicking on the “Run” button again, after editing. We can re-run to try different inputs of variables.

How to input: For input-based programs, once you run the program, it will require your input to execute. A pop-up box will appear to type the input in that box first to get the desired results. You must type the inputs one after the other for more than one input.

Ordered pairs

Write a program that shows the ordered pairs $(x,y)$ so that $1 <= x <= 5$ and $1 <= y <= 5$.

Sample output

( 1 , 1 )
( 1 , 2 )
( 1 , 3 )
( 1 , 4 )
( 1 , 5 )
	
( 2 , 1 )
( 2 , 2 )
( 2 , 3 )
( 2 , 4 )
( 2 , 5 )

( 3 , 1 )
( 3 , 2 )
( 3 , 3 )
( 3 , 4 )
( 3 , 5 )

( 4 , 1 )
( 4 , 2 )
( 4 , 3 )
( 4 , 4 )
( 4 , 5 )

( 5 , 1 )
( 5 , 2 )
( 5 , 3 )
( 5 , 4 )
( 5 , 5 )

Square of asterisks

Write a program that stores a square shape built with asterisks in a variable, result, and displays it at the end. The number of asterisks on the side of the square is input by the user.

Sample input

5

Sample output

*****
*****
*****
*****
*****

Rectangle of asterisks

Write a program that stores a rectangular shape built with asterisks in a variable, result, and displays it at the end. The height and width of the rectangle are input by the user.

Sample input

5
8

Sample output

********
********
********
********
********

Right triangle

Write a program that shows a right triangle built with asterisks. The side length of the right triangle is input by the user.

Sample input

5

Sample output

*
**
***
****
*****