Nested loops in Javascript

Introduction

Nested loops let you repeat actions inside other repeated actions. This helps when you work with things like tables or grids.

When you want to print a grid of stars or numbers.

When you need to check every pair of items in two lists.

When you want to create a multiplication table.

When you process rows and columns in a spreadsheet.

When you want to combine every item from one list with every item from another.

Syntax

Javascript

for (let i = 0; i < outerLimit; i++) {
  for (let j = 0; j < innerLimit; j++) {
    // code to repeat
  }
}

The outer loop runs first, then the inner loop runs completely for each outer loop step.

Use different variable names for each loop to avoid confusion.

Examples

This prints pairs of i and j values for each step of the outer and inner loops.

Javascript

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 2; j++) {
    console.log(`i=${i}, j=${j}`);
  }
}

This example shows how to loop through rows and columns like in a table.

Javascript

for (let row = 1; row <= 2; row++) {
  for (let col = 1; col <= 3; col++) {
    console.log(`Row ${row}, Column ${col}`);
  }
}

Sample Program

This program prints 3 rows of 4 stars each, making a simple star grid.

Javascript

for (let i = 1; i <= 3; i++) {
  let line = '';
  for (let j = 1; j <= 4; j++) {
    line += '* ';
  }
  console.log(line);
}

Important Notes

Nested loops can slow down your program if used with large limits because they repeat many times.

Always check your loop limits to avoid infinite loops.

Summary

Nested loops run one loop inside another to handle repeated tasks in layers.

They are useful for working with grids, tables, or pairs of items.

Remember to use different variables for each loop and watch the limits.

Practice

1. What does a nested loop in JavaScript mean?
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 2; j++) {
console.log(i, j);
}
}

easy

A. A loop inside another loop, running multiple times

B. A loop that runs only once

C. A loop that runs backwards

D. A loop that skips some numbers

Solution

1. Step 1: Understand the code structure

   The code has one loop inside another, called nested loops.

2. Step 2: Explain the behavior

   The inner loop runs fully for each iteration of the outer loop, so it runs multiple times.

3. Final Answer:

   A loop inside another loop, running multiple times -> Option A

4. Quick Check:

   Nested loop = loop inside loop [OK]

Hint: Nested means one loop inside another [OK]

Common Mistakes:

• Thinking nested loops run only once
• Confusing nested loops with single loops
• Believing nested loops skip numbers

2. Which of the following is the correct syntax for a nested loop in JavaScript?

easy

A. for (let i = 0; i < 3; i++) { for (let j = 0; j < 2; j++) { } }

B. for i in range(3) { for j in range(2) { } }

C. while (i < 3) { while (j < 2) }

D. loop i from 0 to 3 { loop j from 0 to 2 { } }

Solution

1. Step 1: Identify JavaScript loop syntax

   JavaScript uses for (let variable = start; condition; increment) syntax.

2. Step 2: Check nested loops syntax

   for (let i = 0; i < 3; i++) { for (let j = 0; j < 2; j++) { } } correctly nests two for loops with proper syntax and braces.

3. Final Answer:

   for (let i = 0; i < 3; i++) { for (let j = 0; j < 2; j++) { } } -> Option A

4. Quick Check:

   JS nested loops use for(;;) inside for(;;) [OK]

Hint: Look for 'for (let i=0; ...)' syntax in JavaScript [OK]

Common Mistakes:

• Using Python or other language syntax
• Missing curly braces {}
• Incorrect loop keywords

3. What is the output of this code?

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(i * j);
  }
}

medium

A. 1 2 3 1 2 3

B. 6 5 4 3 2 1

C. 1 4 9 2 5 8

D. 1 2 3 2 4 6

Solution

1. Step 1: Trace outer loop values

   Outer loop i runs 1 and 2.

2. Step 2: Calculate inner loop outputs

   For i=1, j=1,2,3 outputs 1*1=1, 1*2=2, 1*3=3.
   For i=2, j=1,2,3 outputs 2*1=2, 2*2=4, 2*3=6.

3. Final Answer:

   1 2 3 2 4 6 -> Option D

4. Quick Check:

   Multiply i and j in nested loops [OK]

Hint: Multiply outer and inner loop counters [OK]

Common Mistakes:

• Mixing up i and j values
• Not running inner loop fully each time
• Confusing output order

4. Find the error in this nested loop code:

for (let i = 0; i < 3; i++) {
  for (let i = 0; i < 2; i++) {
    console.log(i);
  }
}

medium

A. Outer loop condition is wrong

B. Missing semicolon after for loops

C. Inner loop uses same variable name 'i', causing conflict

D. Console.log syntax is incorrect

Solution

1. Step 1: Check variable names in loops

   Both loops use variable 'i', inner loop redeclares 'i' shadowing outer.

2. Step 2: Explain why this is a problem

   Using same variable name causes confusion and unexpected behavior in nested loops.

3. Final Answer:

   Inner loop uses same variable name 'i', causing conflict -> Option C

4. Quick Check:

   Use different variables for nested loops [OK]

Hint: Use different variable names for each loop [OK]

Common Mistakes:

• Reusing same variable name in nested loops
• Ignoring variable scope issues
• Assuming semicolons are mandatory after for()

5. You want to print a 3x3 grid of stars (*) using nested loops. Which code correctly does this?

hard

A. for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { console.log('*'); } }

B. for (let i = 0; i < 3; i++) { let row = ''; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); }

C. for (let i = 0; i < 3; i++) { console.log('***'); }

D. for (let i = 0; i < 3; i++) { let row = '*'; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); }

Solution

1. Step 1: Understand the goal

   We want 3 rows, each with 3 stars printed together as a line.

2. Step 2: Check each option's output

   for (let i = 0; i < 3; i++) { let row = ''; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); } builds a string of 3 stars per row and prints it 3 times.
   for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { console.log('*'); } } prints stars individually, not as rows.
   for (let i = 0; i < 3; i++) { console.log('***'); } prints 3 stars but only 3 times, no loop for columns.
   for (let i = 0; i < 3; i++) { let row = '*'; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); } starts with '*' and adds three more '*', printing four stars per row.

3. Final Answer:

   for (let i = 0; i < 3; i++) { let row = ''; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); } -> Option B

4. Quick Check:

   Build row string inside outer loop [OK]

Hint: Build each row string inside outer loop [OK]

Common Mistakes:

• Printing stars one by one without grouping
• Not resetting row string inside outer loop
• Confusing loops for rows and columns