πŸ”Star Pattern Printing in JavaScript – Deep Dive

Let’s break everything down:


πŸ” Pattern Printing in JavaScript – Deep Dive

We use nested loops.

  • Outer loop (i) β†’ rows

  • Inner loop (j, k) β†’ columns (how many things to print per row)

  • Conditions (i < n, j < n, etc.) decide when loops stop.


1️⃣ Square of Stars

let n = 4;
for (let i = 0; i < n; i++) {    // row control
  let row = "";
  for (let j = 0; j < n; j++) {  // column control
    row += "*";
  }
  console.log(row);
}

πŸ”Ή Logic

  • Outer loop β†’ runs n times β†’ total rows = 4

  • Inner loop β†’ also runs n times β†’ total stars = 4 per row

πŸ”Ή Conditions

  • i < n ensures loop runs exactly 4 rows.

  • j < n ensures 4 stars are added per row.

βœ… Output:

****
****
****
****

2️⃣ Right Triangle of Stars

for (let i = 0; i < n; i++) {  
  let row = "";
  for (let j = 0; j < i + 1; j++) {  
    row += "*";
  }
  console.log(row);
}

πŸ”Ή Logic

  • Outer loop: i=0..n-1 (row count)

  • Inner loop: runs i+1 times β†’ row length grows each time

πŸ”Ή Conditions

  • Row 0 β†’ j < 1 β†’ 1 star

  • Row 1 β†’ j < 2 β†’ 2 stars

  • Row 2 β†’ j < 3 β†’ 3 stars

  • Row 3 β†’ j < 4 β†’ 4 stars

βœ… Output (n=4):

*
**
***
****

3️⃣ Number Triangle (1..j)

for (let i = 0; i < n; i++) {
  let row = "";
  for (let j = 0; j <= i; j++) {
    row += (j + 1);
  }
  console.log(row);
}

πŸ”Ή Logic

  • Outer loop β†’ row count = n

  • Inner loop β†’ runs from 0 β†’ i (inclusive)

  • Prints numbers 1 to (i+1)

πŸ”Ή Conditions

  • j <= i means row length = i+1

  • Each row starts from j=0 so (j+1) gives 1,2,3,…

βœ… Output (n=5):

1
12
123
1234
12345

4️⃣ Number Triangle (Row number repeated)

for (let i = 0; i < n; i++) {
  let row = "";
  for (let j = 0; j <= i; j++) {
    row += (i+1);
  }
  console.log(row);
}

πŸ”Ή Logic

  • Outer loop β†’ row count = n

  • Inner loop β†’ runs i+1 times

  • Instead of j+1, we use (i+1) β†’ repeats row number

πŸ”Ή Conditions

  • Row 0 β†’ j=0..0 β†’ prints 1

  • Row 1 β†’ j=0..1 β†’ prints 22

  • Row 2 β†’ j=0..2 β†’ prints 333

βœ… Output:

1
22
333
4444
55555

5️⃣ Inverted Number Triangle

for (let i = 0; i < n; i++) {
  let row = "";
  for (let j = 0; j < n-i; j++) {
    row += (j + 1);
  }
  console.log(row);
}

πŸ”Ή Logic

  • Outer loop β†’ controls row count

  • Inner loop β†’ length = n-i (shrinks each row)

πŸ”Ή Conditions

  • Row 0 β†’ j < 5 β†’ 12345

  • Row 1 β†’ j < 4 β†’ 1234

  • Row 2 β†’ j < 3 β†’ 123

  • Row 3 β†’ j < 2 β†’ 12

  • Row 4 β†’ j < 1 β†’ 1

βœ… Output:

12345
1234
123
12
1

6️⃣ Inverted Triangle of Stars

for (let i = 0; i < n; i++) {
  let row = "";
  for (let j = 0; j < n-i; j++) {
    row += "*";
  }
  console.log(row);
}

πŸ”Ή Logic

  • Same as previous but prints stars instead of numbers.

πŸ”Ή Conditions

  • j < n-i β†’ decreases star count each row.

βœ… Output (n=5):

*****
****
***
**
*

7️⃣ Right-Aligned Triangle (with spaces _)

for (let i = 0; i < n ; i++) {
  let row = "";
  for (let j = 0; j < n-(i+1); j++) {
    row += "_";   // spaces
  }
  for (let k = 0; k < i + 1; k++) {
    row += "*";
  }
  console.log(row);
}

πŸ”Ή Logic

  • First inner loop β†’ prints spaces _

  • Second inner loop β†’ prints stars *

  • Spaces decrease, stars increase per row

πŸ”Ή Conditions

  • Row 0 β†’ spaces=4, stars=1

  • Row 1 β†’ spaces=3, stars=2

  • Row 2 β†’ spaces=2, stars=3

  • Row 3 β†’ spaces=1, stars=4

  • Row 4 β†’ spaces=0, stars=5

βœ… Output:

____*
___**
__***
_****
*****

8️⃣ Binary Triangle (Row-wise toggle reset)

for (let i = 0; i < n; i++) {
  let row = "";
  let toggle = 1;
  for (let j = 0; j <= i; j++) {
    row += toggle;
    toggle = toggle === 1 ? 0 : 1;
  }
  console.log(row);
}

πŸ”Ή Logic

  • toggle starts at 1 fresh each row

  • Flips between 1 β†’ 0 β†’ 1 β†’ 0 …

πŸ”Ή Conditions

  • Inner loop j <= i β†’ row length grows

  • Each iteration flips toggle

βœ… Output:

1
10
101
1010
10101

9️⃣ Binary Triangle (Global toggle continues across rows)

let toggle = 1;
for (let i = 0; i < n; i++) {
  let row = "";
  for (let j = 0; j <= i; j++) {
    row += toggle;
    toggle = toggle === 1 ? 0 : 1;
  }
  console.log(row);
}

πŸ”Ή Logic

  • Global toggle β†’ does not reset row by row

  • Pattern continues across all rows

πŸ”Ή Conditions

  • j <= i β†’ row length increases

  • Toggle value continues from previous row

βœ… Output:

1
01
010
1010
10101

✨ Key Takeaway (Patterns + Conditions)

  • j < n β†’ full row (square)

  • j <= i β†’ grows with row (triangle)

  • j < n-i β†’ shrinks with row (inverted)

  • toggle β†’ switches between 0/1

0
Subscribe to my newsletter

Read articles from Kamlesh Choudhary directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Kamlesh Choudhary
Kamlesh Choudhary