Center-Aligned Pyramid Star Pattern in JavaScript

Beginner
7 min read
Updated: Sep 2026
3 programs
Live preview

What Is This Pattern?

A center-aligned pyramid grows to a wide base with a single peak: row i has rows - i leading spaces and 2 * i - 1 stars.

Remember
Rule: spaces = rows - i, stars = 2 * i - 1

    *
   ***
  *****
 *******
*********     ← 5 rows

It reuses Program 3’s spacing idea, but uses odd star counts so the shape widens on both sides. The same row formula is the upper half of the filled diamond.

How to Solve It

Two inner loops per row — spaces then odd stars — or the same formulas with String.repeat.

MethodIdeaBest for
Nested loopsrows - i spaces, then 2 * i - 1 starsLearning, interviews, exams
String.repeatBuild spaces and stars as whole stringsShorter demos once loops click

Pseudocode

Pseudocode
for i from 1 to rows:
    line = ""
    for j from 1 to (rows - i):
        line += " "
    for k from 1 to (2 * i - 1):
        line += "*"
    print line

Cheat sheet

GoalPattern
Walk each rowfor (let i = 1; i <= rows; i++)
Leading spacesfor (let j = 1; j <= rows - i; j++) line += " ";
Odd star runfor (let k = 1; k <= 2 * i - 1; k++) line += "*";
Base width2 * rows - 1 stars on the last row
Invert laterfor (let i = rows; i >= 1; i--) → Program 6
Row shortcutconsole.log(" ".repeat(rows - i) + "*".repeat(2 * i - 1));

line += vs console.log

APIEffectUse for
line += " " / line += "*"Stays on the same rowEach space and each *
console.log(line)Ends the current rowAfter spaces and stars for that row

Live Preview

Change the row count and the pyramid updates instantly — including the perfect-square star total.

Whole numbers from 1 to 15. Base width = 2 * rows - 1; total stars = rows².

Live result 5 rows · 25 stars
    *
   ***
  *****
 *******
*********

Worked Walkthrough — rows = 4

Trace spaces and odd star counts for each outer-loop value of i.

iSpaces rows - iStars 2 * i - 1Printed row
131*
223***
315*****
407*******

Total stars: 1 + 3 + 5 + 7 = 16 = 4². Base width: 2×4 - 1 = 7.

JavaScript Programs

Three complete programs: fixed rows, prompt input, and a String.repeat shortcut. Use View Output to reveal sample results.

Example 1 — Fixed rows = 5

Hard-coded height — ideal for first demos and screenshots.

JavaScript
let rows = 5;

for (let i = 1; i <= rows; i++) {
  let line = "";
  for (let j = 1; j <= rows - i; j++) {
    line += " ";
  }
  for (let k = 1; k <= 2 * i - 1; k++) {
    line += "*";
  }
  console.log(line);
}

How It Works

1. Set height. rows = 5 means five lines; the base has 2 * 5 - 1 = 9 stars.

2. Outer loop picks the row. i runs from 1 to rows. Start a fresh line = "" each time.

3. Spaces then stars. Append rows - i spaces, then 2 * i - 1 stars with line +=.

4. Print the row. console.log(line) after both inner loops starts the next row.

When i = 1: 4 spaces + 1 star. When i = 5: 0 spaces + 9 stars.

Example 2 — User Input Version

Read the row count at runtime with prompt. Prefer validating with Number.isFinite (shown in the tip below).

JavaScript
let rows = parseInt(prompt("Enter the number of rows:"), 10);

for (let i = 1; i <= rows; i++) {
  let line = "";
  for (let j = 1; j <= rows - i; j++) {
    line += " ";
  }
  for (let k = 1; k <= 2 * i - 1; k++) {
    line += "*";
  }
  console.log(line);
}

How It Works

1. Prompt and parse. Ask for a row count, then convert with parseInt(..., 10).

2. Same nested-loop core. Only the source of rows changes — the print logic matches Example 1.

3. Safer input tip. Bare parseInt yields NaN on letters or Cancel. Prefer:

Safer input
let rows = parseInt(prompt("Enter the number of rows:"), 10);
if (!Number.isFinite(rows) || rows < 1) {
  console.log("Enter a positive whole number.");
} else {
  // run the pattern loops here
}

Example 3 — String.repeat for Spaces and Stars

Build each row in one expression — same shape, no explicit space/star character loops.

JavaScript
let rows = 5;

for (let i = 1; i <= rows; i++) {
  console.log(" ".repeat(rows - i) + "*".repeat(2 * i - 1));
}

How It Works

1. One outer loop. Still walk i from 1 to rows.

2. Build the row. " ".repeat(rows - i) for padding; "*".repeat(2 * i - 1) for the odd star run.

3. Learn loops first. Use Examples 1–2 when you need to show nested bounds; treat this as a polish shortcut afterward.

Edge Cases & Pitfalls

Check these before calling the solution done.

2 * i

Even width

Use 2 * i - 1 (odd). Even widths lose the classic single-center peak.

j < rows - i

One space short

Space loop must be j <= rows - i. A strict < shifts the peak.

Only i stars

Program 3 shape

Same spaces with i stars is the right-aligned triangle, not a full pyramid.

console.log inside

Column of characters

If console.log is inside either inner loop, each character lands on its own line. Use line += for cells; log only after both loops.

rows = 1

Single star

0 spaces + 1 star — a good tip sanity check.

Bad prompt

Guard against NaN

Cancel or letters yield NaN — check Number.isFinite(rows) before looping.

Time and Space Complexity

ProgramTimeExtra space
Nested loops (Examples 1–2)O(rows²)O(rows) for the line string
String.repeat shortcut (Example 3)O(rows²)O(rows) per temporary row string

Each of n rows builds Θ(n) characters (spaces + stars). Total stars = 1 + 3 + … + (2n - 1) = n².

Key Takeaways

  • Formulas: rows - i spaces and 2 * i - 1 stars.
  • Odd widths: keep 2 * i - 1 for a single centered peak.
  • Break the row: line += for spaces/stars; console.log after both loops.
  • Complexity: O(n²) time; total stars = n²; O(n) for the row string.

One line: append rows - i spaces, then 2 * i - 1 stars — that is the centered pyramid.

Frequently Asked Questions

2*i-1 gives odd lengths 1, 3, 5, … so each row adds one star on both sides. Using only i stars per row would not form the usual symmetric centered pyramid.
Appending (rows - i) spaces before the stars shifts the star block left as i grows, keeping the peak centered when the font is fixed-width.
Yes. Keep the same inner loops but run the outer loop from rows down to 1. The first printed row is the widest; later rows narrow toward the tip. See Program 6.
The last row has 2 * rows - 1 stars and no leading spaces when i equals rows.
line += stays on the same row with no newline between characters. console.log(line) ends the row after both inner loops finish.
O(n²) for n rows. Each row prints Theta(n) characters in the worst case; there are n rows. Total stars equal n².
Program 3 uses the same (rows - i) spaces but only i stars. Program 5 uses 2*i-1 stars so the shape widens on both sides.
Yes. console.log(' '.repeat(rows - i) + '*'.repeat(2 * i - 1)) builds each row without explicit inner character loops.

Did you know?

Odd star counts 1, 3, 5, … come from 2 * i - 1. Their sum for n rows is n² — so total stars grow as a perfect square. This pyramid is also the upper half of the filled diamond.

Next: Inverted Pyramid

Flip the outer loop and print a wide-to-narrow centered pyramid.

Program 6 tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

12 people found this page helpful