Tutorial: Nested For Loops in JavaScript

Introduction

I will start by briefly giving an example of a for loop in JavaScript.

const arr = [1, 2, 3, 4, 5, 6];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//Returns --->
1
2
3
4
5
6

• In the above example, we start by declaring a variable called arr and assign to this an array that contains the numbers one through to six.
• Next, we create a for loop, We initialise a variable called i which acts as the counter for the loop.
• Next, we use a condition for when the loop should stop running. In our case, we will keep running the loop whilst i is less than the length of the arr array.
• Lastly, for the updater, we say every time the loop runs we should increment i.
• Inside the body of the loop, we use a console log to print out the element of the arr array which is at the index of i when the loop runs.

The result of this is that every element in the arr array gets printed out.

Sometimes you may find yourself presented with a more complex data structure such as a nested array. Let’s start by looking at what happens when we use the loop above with this type of data structure.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//Returns ---> 
[1, 2]
[3, 4]
[5, 6]

In the above example we use the same for loop but this time the arr array contains three nested arrays, and each nested array contains two values. When the loop runs we get each of the nested arrays returned. What if we wanted to access the individual elements of the nested arrays? This is where nested for loops become useful.

Nested loops

By using a nested loop we can access the individual elements in the nested arrays. Let’s look at an example of how this would work with the example above.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  for(let j = 0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}
//Returns --->
1
2
3
4
5
6

The result of our nested loop is that we are able to list out each individual element within the nested arrays. Now let’s break down what is going on here. We already know that the outer loop accesses each of the nested arrays. When this happens the inner loop goes through each element in the nested array. So the console log is essentially saying for the array element of i, which is the array containing 1 and 2 using j iterate through these elements. Let’s break this down a bit further. For the first iteration of the loop we get the following:

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(`I am the outer loop ${arr[i]}`)
  for(let j = 0; j < arr[i].length; j++) {
    console.log(`I am the inner loop ${arr[i][j]}`)
  }
}
//Returns --->
I am the outer loop 1,2
I am the inner loop 1
I am the inner loop 2

So the outer loop returns the first nested array which contains the elements 1 and 2. The inner loop then loops through each of the elements of the nested array in turn. Therefore we get 1 and then we get 2.

This process runs for the entire array of nested arrays. Therefore the final output with these console logs is below.

const arr = [[1, 2], [3, 4], [5, 6]];
for(let i = 0; i < arr.length; i++) {
  console.log(`I am the outer loop ${arr[i]}`)
  for(let j = 0; j < arr[i].length; j++) {
    console.log(`I am the inner loop ${arr[i][j]}`)
  }
}
//Returns --->
I am the outer loop 1,2
I am the inner loop 1
I am the inner loop 2
I am the outer loop 3,4
I am the inner loop 3
I am the inner loop 4
I am the outer loop 5,6
I am the inner loop 5
I am the inner loop 6

Arrays of Strings

This approach can be equally useful if you have an array of words and you want to loop through each individual letter. Let’s look at an example.

const names = ["Abby", "Bobby", "Freddy"];
for(let i = 0; i < names.length; i++) {
  console.log(names[i]);
}
//Returns --->
Abby
Bobby
Freddy

Using the for loop we iterate through the names array and we can access each element in the names array. This is great but if you want to access the individual elements of the names then a nested loop is a very useful pattern.

const names = ["Abby", "Bobby", "Freddy"];
for(let i = 0; i < names.length; i++) {
  console.log(`I am the outer loop ${names[i]}`)
  for(let j = 0; j < names[i].length; j++) {
    console.log(`I am the inner loop ${names[i][j]}`)
  }
}
//Returns --->
I am the outer loop Abby
I am the inner loop A
I am the inner loop b
I am the inner loop b
I am the inner loop y
I am the outer loop Bobby
I am the inner loop B
I am the inner loop o
I am the inner loop b
I am the inner loop b
I am the inner loop y
I am the outer loop Freddy
I am the inner loop r
I am the inner loop e
I am the inner loop d
I am the inner loop d
I am the inner loop y

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!