Navigating Nested Loops: A Voyage through JavaScript's Orbital System

Lesson 4

Introduction and Topic Actualization

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.

Structure of a Nested 'for' Loop in JavaScript

Let's decipher the structure of a nested for loop in JavaScript:

JavaScript
1for (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.

Structure of a Nested 'while' Loop in JavaScript

Much like for loops, while loops can also be nested:

JavaScript
1let 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.

Nested Loops in JavaScript: Real-life Example

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:

JavaScript
1let 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.

Nested Loops in JavaScript: Another Example

Another nested for loop example creates a numerical pyramid:

JavaScript
1for (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:

Lesson Summary and Practice

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!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.