Loop de Loop: When and How to Use Nested Loops
Using nested loops productively in web development
By Jenna Dean
Nested loops have been a controversial topic in the programming world, regarding their lack of efficiency relative to other methods. However, good old gnasher729 on “Stack Exchange” said it best…
“Driving a thirty ton truck instead of a small passenger vehicle is bad practice. Except when you need to transport 20 or 30 tons of stuff. When you use a nested loop, it’s not bad practice. It’s either utterly stupid, or it’s exactly what is needed. You decide.”
-gnasher729, Stack Exchange
Thanks to gnasher’s words of wisdom, we are going to dive deep into nested loops and transport our 20 to 30 tons with ease!
When I first came across a nested loop, my mind was boggled, bamboozled, and fried. A normal for loop or while loop was complicated enough to understand (if you need a brush up on loops please refer to my lovely colleagues, Bola or Ren’s posts on loops, but nested loops brought it to another level.
What is a nested loop?
A nested loop, in its’ simplest form, is a loop within a loop. You’re looping one loop through another loop. Not too bad, huh? Nested loops are extraordinarily useful when you have two different arrays that need to be looped through the same function, looping different arrays into properties of various objects, when you need a “2D” array (x and y-axis), and the list goes on. Since nested loops perform at the rate of the amount of data input there is squared (O(N²) in Big O notation), it is not the most efficient. However, we know its useful when it needs to be useful! Time to move those tons on our big ol’ 18-wheeler and get started.
Let’s bring it to a real life example. It’s your wedding and you are getting ahead of planning by making labels for each guest! You need to label your invitations, the RSVP envelopes, and your goody bags (what a gracious host you are!) Given the three different items that need to be labelled vary in size, you need to make the labels three different sizes. Let’s break it down. (And yes it is a very small wedding.) We will be using JavaScript to demonstrate today, but nested loops can be implemented in most of the major programming languages!
Label sizes: extra small (RSVP), small (invitations), medium (goody bags)
Guests: Liz, Margaret, Jessica, Amy, Rob, Tyler, John, Jacob, Jingleheimer, Schmidt
Great! Now, in plain English, let’s think of what we have to do. We have to create labels for each guest in three different sizes. Sounds like a couple of for loops to me! Time to pseudocode.
//PSEUDOCODE
//Create two arrays, one for sizes and one for guest
//Set-up a for loop for looping through the sizes (outer-loop)
//Make a for loop for looping through guests (inner-loop)
//Place a createLabel() function inside of the inner-loop and set it //so that Pseudocode done! As a heads-up, I will not be defining this createLabel() function, so if you need a brush up on functions, please refer to Shelby Jacob’s post on functions. Now… Let’s make this nested loop!
- We will create our two arrays
const sizes = ["extra-small", "small", "medium"];
const guests = ["Liz", "Margaret", "Jessica", "Amy", "Rob", "Tyler", "John", "Jacob", "Jingleheimer", "Schmidt"];2. Set-up our outer-loop
for(i = 0; i < sizes.length; i++){}
This will be our backbone to start getting our wedding materials labelled. What we are doing here is setting up the first loop to run through each size once.
3. Using a DIFFERENT ITERATOR, set-up our inner loop, and add in function inside. (The most common starting iterator is i, and then just move on the next letter in each inner-loop. We will use j)
for(j = 0; j < guests.length; j++){
createLabel([i][j]);
}Again, I just want to reITERATE (pun very intended) that the createLabel() function is just to show the example of the nested loops. Placing the [i] and the [j] next to each other will connect the two when trying to create a new array.
4. Shouldn’t be too hard, but let’s put it all together and see what we’ve got!
const sizes = ["extra-small", "small", "medium"];
const guests = ["Liz", "Margaret", "Jessica", "Amy", "Rob", "Tyler", "John", "Jacob", "Jingleheimer", "Schmidt"];for(i = 0; i < sizes.length; i++){
for(j = 0; j < guests.length; j++){
createLabel([i][j]);
}
};
ALRIGHT WE DID IT!! Now what will the results look like you ask? In a world where createLabel() is working function, then each name would have three different labels with their name on it!
THERE YOU HAVE IT! Keep coding and nesting those loops.
