You may recall the idea of nesting from the lesson on conditional statements.
Nesting simply means placing something within another instance of the same type.
With nested conditional statements, we wrote an if statement that had an if or if-else statement within it.

The same idea applies to all loops.
We can nest for loops inside of for loops, while loops inside of while loops, do while loops inside of do while loops, etc.
We can also nest any loop type within a loop of a different type. For example, placing a while loop inside of a forloop, or a for loop inside of a do-while loop.

We are also able to place conditional statements within loops, and vice versa
The purpose of nesting is to execute code depending on further conditions.

For example, imagine you just woke up and are getting dressed for the day.
- What do you take into consideration when you’re getting dressed?
- You probably take a look at the weather to know how best to dress
- If its cold, you bundle up. If its warm, you put on shorts and a shirt.

But what other factors alter our outfit of the day? What about if the weather app tells us its raining today?
Does this change your outfit of choice? You might choose to wear rain boots or a rain jacket instead or in addition to your original choices.

First, our outfit was dependent on the temperature outside. Then we considered the weather. Our outfit was then dependent on further conditions.
Therefore, if we were to see this scenario programmed via conditional statements or perhaps using loops, there would be nesting at some point to include a test for the weather, since this factor can alter the outfit we choose.

Lets model this scenario using nested conditional statements, which we have had practice with before:

let temperature = 75;
let weather = "rainy";
if (temperature < 45) {
  if (weather == "sunny") {
    let clothes = "warm clothes with a hat or some sunglasses";
  } else if (weather == "rainy") {
    let clothes = "warm, dry clothes with a rain jacket or rain boots";
  } else {
    let clothes = "bundle up in warm clothes";
  }
} else if (temperature < 65) {
  if (weather == "sunny") {
    let clothes = "layered clothes with a hat or some sunglasses";
  } else if (weather == "rainy") {
    let clothes = "layered clothes clothes with a rain jacket or rain boots";
  } else {
    let clothes = "wear layered clothes to adapt to the chilly and warm parts of the day";
  }
} else {
  if (weather == "sunny") {
    let clothes = "light & breathable clothes with a hat or some sunglasses";
  } else if (weather == "rainy") {
    let clothes = "light & breathable clothes with a rain jacket or rain boots";
  } else {
    let clothes = "wear light & breathable clothes because it is hawt outside";
  }
}

We’ve had plenty of practice with nested conditional statements, so lets start looking at nested loops:
Nested for loops can be used to accomplish a variety of goals. One of the most common uses for nested for loops is accessing elements within 2D arrays

Consider the following 2D array “breakfasts”, created by declaring arrays within an array:

var breakfasts = [
  // each of these arrays are elements of the breakfasts array, 
  // though they are arrays with elements themselves.
  ["biscuits", "sausage"],
  ["pancakes", "syrup"],
  ["kolache", "jelly"]
];

Using a single for loop, we can access the second element in each array. The second elements include sausage, syrup, and jelly.

We can accomplish this pretty easily by specifying that the element we want to access is the second element in each array, like so:

for (let i = 0; i < breakfasts.length; i++) {
  // the element is accessed by accessing the i-th element of the 
  // breakfasts array, which we know is an array itself, so we 
  // specify which element of this array we want to access:
  // remember that the second element of an array has an index of 1 
  console.log(breakfasts[i][1]);
}

Checking the console, you’ll see that the second elements were printed out

What about scenarios in which there are multiple elements in a 2D array and we want to traverse through all of them, instead of accessing a single element?
In this instance, we implement nested for loops:

var newBreakfasts = [
  ["biscuits", "sausage", "OJ", "cheese grits", "grapes"],
  ["pancakes", "syrup", "strawberries", "apple juice", "ham"],
  ["kolache", "jelly", "bacon", "mango", "chocolate milk"]
];

Using the same methodology as the forloop on line 38 would only result in the second element within each array being printed.
We want to print each item related to each breakfast, however, so we will implement a nested for loop like so:

for (let i = 0; i < newBreakfasts.length; i++) {
  // this line is simply printing "Breakfast Option N: " to the 
  // console to keep the print statements organized
  console.log("Breakfast Option " + (i + 1) + " : ")
  // pay special attention to the second for loop's statement 2. 
  // It says it will loop as long as j is less than the length 
  // of the array ***located at element i***
  for (let j = 0; j < newBreakfasts[i].length; j++) {
    console.log(newBreakfasts[i][j]);
  }
}

For loops are the best loop to iterate through arrays of one or more dimensions, but the same concept of nested loops applies to other types of loops as well
Below is an example of nested while loops:
The loops are printing 99 through 00 to the console, one by one

The first while loop executes WHILE the statement “tens is greater than or equal to 0” is TRUE.
Looking at the declaration of the tens variable on line 136, we see that tens is initialized to 9. This means that the outer loop will loop 10 times total
The second while loop executes WHILE the statement “ones is greater than or equal to 0” is TRUE.

On line 74, we initialized ones to equal 9. We place this withIN the first while loop because of the fact that the second while loop is decrementing the ones variable.
If we failed to place “ones = 9” within the first while loop, the ones variable would not be reset to 9 after having printed the ten values, and the rest of the values would not be printed.

Nested while loop example:

let tens = 9;
let ones;
while (tens >= 0) {
  ones = 9;
  while (ones >= 0) {
    console.log(tens + "" + ones);
    // here we ensure to decrement the ones variable so that we 
    // are not caught in an infinite loop
    ones--;
  }
  // here we ensure to decrement the tens variable so that we 
  // are not caught in an infinite loop
  tens--;
}

Below are a few examples of different nested loops:
Do while:

do {
  let count = 10;
  console.log("doin the first thing");
  do {
    count--;
    console.log("doin the second thing within the first thing");
  } while ((count + 1) > 2);
} while (count > 0);

Exercises

back

Nested Loops