JavaScript Number-Star Diamond Pattern

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

What Is This Pattern?

A number-star diamond grows rows like 1, 2*2, 3*3*3 to a peak, then mirrors back down — alternating the row number and * with j % 2.

Remember
Rule: top i = 1..n, then bottom i = n-1..1
      each row: 2*i-1 chars; odd j → i, even j → *

1
2*2
3*3*3
4*4*4*4
5*5*5*5*5
4*4*4*4
…
1         ← n = 5

A natural step after Program 30’s right-aligned triangle — here you practice modulus and a two-half diamond.

How to Solve It

Grow i to n, then shrink from n-1; each row fills 2*i-1 characters with digit/* alternation.

MethodIdeaBest for
Two outer loopsTop grow + bottom mirror; shared inner alternationLearning, interviews
prompt heightSame loops; ternary j % 2Interactive practice
Compact n = 3Same structure; easier to trace by handPaper walkthrough

Pseudocode

Pseudocode
for i from 1 to n:
    line = ""
    for j from 1 to 2*i - 1:
        line += "*" if j even else i
    print line

for i from n - 1 down to 1:
    (same inner loop)

Cheat sheet

GoalPattern
Set heightconst n = 5;
Top halffor (let i = 1; i <= n; i++)
Bottom halffor (let i = n - 1; i >= 1; i--)
Inner widthfor (let j = 1; j < i * 2; j++)
Alternateif (j % 2 === 0) line += "*"; else line += i;
Ternaryline += (j % 2 === 0) ? "*" : i;
End rowconsole.log(line);

Printing Numbers vs Starting a New Line

APIEffectUse for
line += i / line += "*"Stays on the same rowEach character
console.log(line)Ends the lineAfter the inner loop

Build the row with +=, then break once with console.log. Putting console.log inside the inner loop prints one character per line.

Live Preview

Change the height and the number-star diamond updates instantly.

Whole numbers from 1 to 9. Tap a chip or type a value — the preview redraws as you go.

Live result n = 5 · lines = 9
1
2*2
3*3*3
4*4*4*4
5*5*5*5*5
4*4*4*4
3*3*3
2*2
1

Worked Walkthrough — n = 3

Trace each half, the inner width 2*i-1, and the printed row.

HalfiWidthPrinted row
Top111
Top232*2
Top353*3*3
Bottom232*2
Bottom111

Bottom starts at n - 1 so the peak row is not printed twice.

JavaScript Programs

Three complete programs: fixed n = 5, prompt height, and compact n = 3. Use View Output for sample results, or Try It Yourself to edit and run in the playground.

Example 1 — Fixed n = 5

Hard-coded height — top grow with if/else, then bottom mirror with the same inner logic.

JavaScript
const n = 5;

for (let i = 1; i <= n; i++) {
  let line = "";
  for (let j = 1; j < i * 2; j++) {
    if (j % 2 === 0) {
      line += "*";
    } else {
      line += i;
    }
  }
  console.log(line);
}

for (let i = n - 1; i >= 1; i--) {
  let line = "";
  for (let j = 1; j < i * 2; j++) {
    if (j % 2 === 0) {
      line += "*";
    } else {
      line += i;
    }
  }
  console.log(line);
}
Try It Yourself

How It Works

1. Top half. i runs from 1 to 5; each row gets 2*i-1 characters.

2. Alternate. Even j appends *; odd j appends the row number i.

3. Bottom half. Mirror from n - 1 down to 1 with the same inner loop — peak is not repeated.

Example 2 — prompt Height

Read n at runtime; use ternary conditions in both halves.

JavaScript
const n = parseInt(prompt("Enter n:"), 10);

if (!Number.isFinite(n) || n < 1) {
  console.log("Please enter a positive integer.");
} else {
  for (let i = 1; i <= n; i++) {
    let line = "";
    for (let j = 1; j < i * 2; j++) {
      line += (j % 2 === 0) ? "*" : i;
    }
    console.log(line);
  }

  for (let i = n - 1; i >= 1; i--) {
    let line = "";
    for (let j = 1; j < i * 2; j++) {
      line += (j % 2 === 0) ? "*" : i;
    }
    console.log(line);
  }
}
Try It Yourself

How It Works

1. Prompt and validate. Parse the answer; reject non-positive or non-numeric input.

2. Same shape. Both halves still use j < i * 2 — only the bound n changes.

3. Ternaries. (j % 2 === 0) ? "*" : i replaces if/else.

Example 3 — Compact n = 3

Same if/else structure with a smaller height — easy to trace on paper.

JavaScript
const n = 3;

for (let i = 1; i <= n; i++) {
  let line = "";
  for (let j = 1; j < i * 2; j++) {
    if (j % 2 === 0) {
      line += "*";
    } else {
      line += i;
    }
  }
  console.log(line);
}

for (let i = n - 1; i >= 1; i--) {
  let line = "";
  for (let j = 1; j < i * 2; j++) {
    if (j % 2 === 0) {
      line += "*";
    } else {
      line += i;
    }
  }
  console.log(line);
}
Try It Yourself

How It Works

1. Same structure. Top and bottom halves match Example 1.

2. Only n changes. Peak is 3*3*3; total lines = 2*n - 1 = 5.

3. Trace first. Walk i = 1, 2, 3 on paper before scaling to 5 or more.

Edge Cases & Pitfalls

Check these before calling the solution done.

log inside

Vertical output

If console.log is inside the inner loop, each character lands on its own line. Log only after the row is built.

n..1

Double peak

Starting the bottom at n reprints the peak. Use i = n - 1.

flip %

Stars on wrong slots

Putting * on odd j (or digits on even) breaks the 2*2 / 3*3*3 look.

n = 1

Single digit

Output is just 1 — the bottom loop never runs.

wrong bound

Inner loop length

Use j < i * 2 (or j <= 2*i - 1) for exactly 2*i-1 characters.

NaN input

Validate parseInt

Letters or empty prompt yield NaN — check Number.isFinite(n) && n >= 1.

Time and Space Complexity

ProgramTimeExtra space
Examples 1–3O(n²)O(n) for the current line string

2*n - 1 rows; row i prints 2*i-1 characters → total work is O(n²).

Key Takeaways

  • Rule: grow 1..n, then mirror n-1..1 with digit/* rows.
  • Modulus: even j → *; odd j → row number i.
  • Write vs log: line += … builds; console.log(line) breaks.
  • Complexity: O(n²) for height n.

One line: alternate the row digit and * while growing to the peak, then mirror without reprinting the middle row.

Frequently Asked Questions

The inner loop runs for (let j = 1; j < i * 2; j++), which appends 1, 3, 5, 7, 9 characters for i = 1..5.
It checks j % 2. Even j appends '*', odd j appends the current row number i.
The first loop builds the top half (i = 1..n). The second mirrors back down (i = n-1..1) to complete the diamond.
Program 30 is a right-aligned descending triangle. Program 31 alternates digits and stars in a symmetric diamond shape.
Replace 5 with n in both outer loops — see Example 2.
O(n²) for n rows because total appended characters grow quadratically across both halves.
Use parseInt with Number.isFinite so bad input does not produce NaN.
Only one row prints — a single 1.
Yes — line += (j % 2 === 0) ? "*" : i compacts the if/else logic in JavaScript.

Did you know?

This pattern prints a top half (1..n) and a bottom half (n-1..1). Each row appends 2*i-1 characters, alternating the row number and * using j % 2.

Next: Increasing Triangle from 11

Continue with the next pattern in the JavaScript number-pattern series.

Program 32 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