Help explaining how this nested loop works

JavaScript
1

Hello everyone!

I need some help understanding the flow of a nested loop. I’ve just started learning Javascript a couple of days ago and I’m using a Pluralsight course for this, the course also teaches me how to create a simple Blackjack game.

Here is the code:

for (let cardSuitIdx = 0 ; cardSuitIdx < cardSuit.length ; cardSuitIdx++) { 
    for (let cardValueIdx = 0 ; cardValueIdx < cardValue.length ; cardValueIdx++) {
        deck.push(cardValue[cardValueIdx] + cardSuit[cardSuitIdx]);
    }
}

The idea is to use the loop to create a deck of cards, which in general has 52 cards. It works exactly as expected: the loop creates 2 new variables and creates enough values for them to be later used as index numbers and create the total of 52 combinations of card types (t.ex. Two, Jack, Queen) + card suits (t.ex. of Diamonds, of Spades). It finishes with pushing those combinations into a deck variable, thus creating a full deck of cards.

What I struggle to understand is, why the loop actually works. You’ve probably noticed that the 1st loop is for creating card suits (4 values) and the 2nd loop is for creating card types (13 values)

That said, here is my question:

  • The way I see it - the 2nd loop, being placed in the first’s code block, should only run until the 1st loop’s condition is met, which happens after 4 runs in total. How come that the 2nd loop continues to produce the values even after that?

I assume the answer is pretty simple but I’m just missing the program flow. The instructor, unfortunately, didn’t explain nested loops beyond the name and the previous lessons about loops introduced for/while loops without mention of the nested loops.

Think of it the other way - if the loops were switched around I wouldn’t even think anything of it since it would make sense for the 2nd loop to complete its condition and the 1st loop to continue working (because it has more values to produce). But, considering that the loop started this way, it really got to me haha.

I hope the post is easily understandable! Thanks for the help :slight_smile:

2

@Gigusek I am trying to answer your query as simple manner as I can right now:
Since you have understood that the first loop will repeat 4 times that is from 0-3 and the inner loop 13 times that is from 0-12, the concept of nested for loops works as follows :-

for (let cardSuitIdx = 0 ; cardSuitIdx < cardSuit.length ; cardSuitIdx++) {

For the first iteration the suitId is set to 0 and the program enters the second loop. The important fact is that the program returns to this first loop only after the second loop returns a false i.e. the condition is not satisfied.

for (let cardValueIdx = 0 ; cardValueIdx < cardValue.length ; cardValueIdx++) {
deck.push(cardValue[cardValueIdx] + cardSuit[cardSuitIdx]);
}

So now the program initializes ValueIdx to 0 and suitid is still 0;
value of deck is cardValue[0] + cardSuit[0]

The value if ValueIdx increments to 1 <13 (the original condition) so the loop continues with suitId still 0
value of deck is cardValue[1] + cardSuit[0]
.
.
.
This continues till ValueIdx increments to 13=13(the original condition) so the Second loop completes.

Then it returns to the first loop to increment suitId to 1 and the inner loop process is started all over again form valueIdx =0 for the second time, since the old declaration no longer exists and it occurs 4 times which is the cardSuit.length.

I know my answer is not very well organised right now but I hope you understand the concept going on here.

1 Like
3

I just read your answer, this is the kind of response I really hoped for, as it filled all the blanks!

I had no idea that once the first loop initializes, it checks the 1st statement and immediately moves on to process the second loop, not returning until it’s complete(seems like something that really should’ve been mentioned the moment it was used in the course).
This also explains why the deck got constructed this way - listing all the cards with the first suit from the cardSuit array and only then moving on to listing the cards with another suit, but I still couldn’t figure it out by just looking at the deck.

Thanks a lot, really appreciate it!

And no worries, you made it pretty easy to understand - thanks for that too, by the way :slight_smile:

1 Like