JavaScript While Loop Patterns

A while loop can build rows one at a time. In this example, the outer while loop controls the number of rows and an inner loop creates the characters for each row.

Growing Star Pattern Top ↑

This is the original nested while + for exercise. The pattern grows by one star on every row.

Output

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

Complete Working Source Top ↑

The complete page structure is shown once. The later examples show only the <script> part that changes.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>While Loop Pattern Demo</title>
</head>
<body>

<pre id="output"></pre>

<script>
const output = document.getElementById("output");
const rows = [];
let i = 1;

while (i <= 6) {
  let row = "";

  for (let j = 1; j <= i; j += 1) {
    row += "*";
  }

  rows.push(row);
  i += 1;
}

output.textContent = rows.join("\n");
</script>

</body>
</html>

Pattern 2: Inverted Star Triangle Top ↑

Key change: start at 6 and reduce the row count after each loop.

<script>
const output = document.getElementById("output");
const rows = [];
let i = 6;

while (i >= 1) {
  let row = "";

  for (let j = 1; j <= i; j += 1) {
    row += "*";
  }

  rows.push(row);
  i -= 1;
}

output.textContent = rows.join("\n");
</script>

Output

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

Pattern 3: Repeated Number Triangle Top ↑

Key change: add the current row number instead of a star.

<script>
const output = document.getElementById("output");
const rows = [];
let i = 1;

while (i <= 5) {
  let row = "";

  for (let j = 1; j <= i; j += 1) {
    row += i;
  }

  rows.push(row);
  i += 1;
}

output.textContent = rows.join("\n");
</script>

Output

1
22
333
4444
55555

Pattern 4: Increasing Number Triangle Top ↑

Key change: append the inner-loop counter j, so each row starts at 1 and grows to the current row number.

<script>
const output = document.getElementById("output");
const rows = [];
let i = 1;

while (i <= 5) {
  let row = "";

  for (let j = 1; j <= i; j += 1) {
    row += j;
  }

  rows.push(row);
  i += 1;
}

output.textContent = rows.join("\n");
</script>

Output

1
12
123
1234
12345

Pattern 5: Centered Pyramid Top ↑

Key change: add leading spaces first, then print an odd number of stars using 2 * i - 1.

<script>
const output = document.getElementById("output");
const rows = [];
const height = 5;
let i = 1;

while (i <= height) {
  let row = "";

  for (let space = 1; space <= height - i; space += 1) {
    row += " ";
  }

  for (let star = 1; star <= 2 * i - 1; star += 1) {
    row += "*";
  }

  rows.push(row);
  i += 1;
}

output.textContent = rows.join("\n");
</script>

Output

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

Pattern 6: Diamond Top ↑

Key change: build an upper pyramid first, then run a second while loop in reverse for the lower half.

<script>
const output = document.getElementById("output");
const rows = [];
const height = 5;

let i = 1;

while (i <= height) {
  let row = "";

  for (let space = 1; space <= height - i; space += 1) {
    row += " ";
  }

  for (let star = 1; star <= 2 * i - 1; star += 1) {
    row += "*";
  }

  rows.push(row);
  i += 1;
}

i = height - 1;

while (i >= 1) {
  let row = "";

  for (let space = 1; space <= height - i; space += 1) {
    row += " ";
  }

  for (let star = 1; star <= 2 * i - 1; star += 1) {
    row += "*";
  }

  rows.push(row);
  i -= 1;
}

output.textContent = rows.join("\n");
</script>

Output

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

What Changes Between the Patterns? Top ↑

• The outer while loop controls how many rows are produced.
• The inner loop controls how many characters appear in each row.
• Changing the starting value or direction of i changes whether the pattern grows or shrinks.
• Printing i or j instead of * produces number patterns.
• Adding spaces before the stars creates centered shapes such as pyramids and diamonds.

Return to the JavaScript while loop tutorial.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: