I’ve got to say, this has been really a really helpful post for me. I’ve been advancing without fully grasping the concept of loops and understanding how they work exactly and so, on algorithm challenges, I’ll figure out how to resolve them but I’ll trip up with my use of loops and I’ll be stuck for hours not on the challenge itself as I’ve long since come up with a solution but the implementation of looping and reaching all the various aspects in the correct order that has long been a problem for me.
This post has been very useful and for the past hour or so, I’ve been playing around with a loop based on 'Unabashedley’s theory using letters rather than numbers and I just console.logged different variations which gave me a few ‘a-ha’ moments.
I’ll share in the hope that it might help others who have had the same problem as me.
I used the full alphabet and ten sub-arrays and I think the longer nature of the array helped me a little more.
var alphabet = [["a","b"],["c","d"],["e","f","g"],["h","i"],["j","k"],["l","m","n"],["o","p"],["r","s"],["t","u","v"],["w","x","y","z"]];
At first, I just used one for loop ‘i’ and looped through with ‘i’ and that just counted my array length 0-9.
for(var i = 0; i < alphabet.length; i++){ console.log(i); }
By adding the ‘i’ to alphabet[i], that accessed or pointed to, each of the sub-arrays: [“a”, “b”], [“c”, “d”] etc.
for(var i = 0; i < alphabet.length; i++){ console.log(alphabet[i]); }
To get inside the sub-arrays, I added a second loop ‘j’ and to begin with, I just wanted to see what happened with each loop individually before I went any further, so I first console.logged ‘i’. That printed out the index of the sub-array by the number of items that it contained because of the second loop ‘j’. The first sub array contained [“a”, “b”] this was at index 0 and because the ‘j’ loop went through it twice, ‘i’ logged 0,0 because ‘j’ makes two loops, then 1,1, then 2,2,2 etc. Even though we’re not logging ‘j’ it still plays it’s part and loops through everything that ‘i’ loops through.
for(var i = 0; i < alphabet.length; i++){ for(var j = 0; j < alphabet[i].length; j++){ console.log(i); } }
This was the first ‘a-ha’ moment and for the first time, my frustration with loops subsided a little, so I continued. Now, I logged ‘j’ but this time, before running it I tried to mentally figure out what was going to happen and I predicted it correctly. As ‘i’ looped through the sub-array and printed it by the number of times of the inner loop ‘j’, logging ‘j’ did the opposite, well kind of - it logged the index of the contents of each sub-array, so sub-array[0] logged 0,1 as there were two items inside; sub-array[1] also logged 0,1; sub-array[2] logged 0,1,2 because there were three items and so on…
for(var i = 0; i < alphabet.length; i++){ for(var j = 0; j < alphabet[i].length; j++){ console.log(j); } }
Then I tried logging ‘i’ and ‘j’ together and that logs both values side by side:
0 (sub-arr index[0]), 0 (content of sub-arr index[0])
0, 1
1, 0
1, 1
1, 2
2, 0 and so on.
for(var i = 0; i < alphabet.length; i++){ for(var j = 0; j < alphabet[i].length; j++){ console.log(i, j); } }
Finally, I added both loops to the alphabet array along with a string narrative to help me visualize everything that was going on.
for(var i = 0; i < alphabet.length; i++){ for(var j = 0; j < alphabet[i].length; j++){ console.log("This is the outer loop 'i' checking the outer level array at index [" + i + "] and this is the second loop, the inner loop 'j' checking the sub-level arrays at index [" + j + "]. As for our alphabet array, that would be letter " + alphabet[i][j]); } }
I wouldn’t say I’ve conquered loops as such but I’ve made a significant break-through or at least it feels that way at this moment and hopefully it helps someone else too.