Hello, learner! Today's journey is into the cosmos of JavaScript's nested loops. Imagine nested loops as loops inside loops, much like galaxies with star systems rotating on their axes while also revolving around their galaxy center. Intriguing, isn't it? By the end of this session, you'll understand how to use nested loops in JavaScript and control them effectively.
Let's decipher the structure of a nested for loop in JavaScript:
JavaScript1for (let i = 0; i < 3; i++) { 2 for (let j = 0; j < 3; j++) { 3 console.log('i =', i, ', j =', j); // e.g., "i = 0 , j = 0" 4 } 5} 6/* 7Prints: 8i = 0 , j = 0 9i = 0 , j = 1 10i = 0 , j = 2 11i = 1 , j = 0 12i = 1 , j = 1 13i = 1 , j = 2 14i = 2 , j = 0 15i = 2 , j = 1 16i = 2 , j = 2 17*/
For every value of i from 0 to 2, we traverse j from 0 to 2 and print the current pair of i and j.
Much like for loops, while loops can also be nested:
JavaScript1let i = 0; 2while (i < 3) { 3 let j = 0; 4 while (j < 3) { 5 console.log('i =', i, ', j =', j); // e.g., "i = 0 , j = 0" 6 j++; 7 } 8 i++; 9} 10/* 11Prints: 12i = 0 , j = 0 13i = 0 , j = 1 14i = 0 , j = 2 15i = 1 , j = 0 16i = 1 , j = 1 17i = 1 , j = 2 18i = 2 , j = 0 19i = 2 , j = 1 20i = 2 , j = 2 21*/
Here again, the inner loop j runs in full for every individual iteration of the outer loop i.
Let's dive into some examples of nested loops. Consider the task of iterating over a two-dimensional (2D) array, which is an array of arrays:
JavaScript1let matrix = [ 2 [1, 2, 3], 3 [4, 5, 6], 4 [7, 8, 9] 5]; 6 7for (let i = 0; i < matrix.length; i++) { // Going through each row. 8 let row = ''; 9 for (let j = 0; j < matrix[i].length; j++) { // Going through each element in the row. 10 row += matrix[i][j] + ' '; // implicit conversion of matrix[i][j] to string 11 } 12 console.log(row); 13} 14/* 15Prints: 161 2 3 174 5 6 187 8 9 19*/
For every row i (outer loop), an inner loop parses every element within that row.
Another nested for loop example creates a numerical pyramid:
JavaScript1for (let i = 1; i <= 5; i++) { // First loop denotes each level of the pyramid. 2 let row = ''; 3 for (let j = 1; j <= i; j++) { // Second loop adds numbers to each level. 4 row += j + ' '; // j + ' ' does implicit type conversion to string 5 } 6 console.log(row); // Prints each level of the pyramid. 7}
This code produces:
Markdown11 21 2 31 2 3 41 2 3 4 51 2 3 4 5
Congratulations! We've explored nested loops in JavaScript, journeyed through nested for and while loops, discovered real-world use cases, and learned through practical examples. The practice assignments are coming up next! Our challenge is for you to master nested loops. Are you ready to dive in? Go for it!