Nested Loops:

Just as we can have multidimensional "strings" nested [arrays], we can also have nested loops:

Let's add to our [array] dogsAlbums, to include their albums outside of their (in?)famous period:


let allDogsAlbums = [["The State We're In"], ["(Un)authorised Bootleg Album", "Dynamite Jet Saloon", "Errol Flynn", "Straight", "More Unchartered Heights Of Disgrace"], ["Happy Ever After", "Let Sleeping Dogs Lie", "When Bastards Go To Hell"], ["Swinging The Bottles... The BBC Sessions"]];

We can iterate through the [array] using a for loop:

(Open console for a better view of each of the nested [array]'s contents)

So how can we access the inner [arrays] details?

Instead of asking for allDogsAlbums[i], we ask for the code to return the index value:

allDogsAlbums[0];

allDogsAlbums[1];

allDogsAlbums[2];

allDogsAlbums[3];

We have used our nested [array] knowledge to access the contents. But how do we work with these nested [arrays]?

We use nested loops:

  1. Nested for loop:

    2. Result:

    Let's now add the tracklist to each of the (in?)famous period albums using the push() and splice() methods:

    Open console to see the individual [arrays] and the result.


    We used push() to push the album tracks and times into each of the album [arrays]. From there, we used splice() to cut out the albums in the second [array] (the one containing the five albums) and then to replace those items with the [arrays] [album name [album tracks and times]].

    Now, let's make a couple of playlists, one of songs that are less than or equal to 3:30 in length, that we shall call [shortSongPlayList] and one of songs longer that 3:30 in length that we shall call [longSongPlayList]:

    To explain the code:

    We have already created our [array] containing all the Dogs d'Amour's albums, and its inner [array] containing their (in?)famous period albums. In that inner [array] we added the song titles and times.

    The next step is to access those songs from the inner [arrays] and then create our playlist. We did this using firstly the loop with index i and its conditions (i = 0; i<[array].length; i++).

    However, within this loop, we needed to access our "start point" for the indexing. Thus we use i<allDogsAlbums[1].length as a condition.

    Next, we created another loop, this time using j for the index and its conditions (j = 0 etc).

    But again, we need to access a certain "start point" for the indexing of those [arrays]. Specifically, we are looking for the [array] containing the [arrays] of songs and times:

    All very complicated... but there is an easier option. Before we go to that easier option, however:


  2. Nested for... in loops:

    3. It is not a good idea to use for... in loops for nested [arrays].

    See this article

  3. Nested for... of loops:

    4. We shal use our [array] containing the Dogs d'Amour's albums, tracks and times again.

    Much simpler! Here is the full for... of loop for us:


  4. Nested while and do... while loops:

    5. These are for when you want to compare two or more variables and want to compare one to another. An example would be area or volume:

    See the Pen nested while loop by Justin Sawyer (@JustinSawyer) on CodePen.


Loops: Break and Continue
Loops: Challenges