Diamond Number Pyramid in JavaScript

Beginner
⏱️ 9 min read
📚 Updated: Sep 2026
🎯 3 Code Examples
🚀 Live Preview
Nested Loops + Centering
Diamond number pyramid output in JavaScript (1, 123, 12345, 1234567, 123456789, ...)
Overview

What You’ll Learn

The centered number diamond prints 1, 123, 12345, … 123456789, then mirrors back down — a natural follow-up after Program 43’s right-aligned triangle. This tutorial covers two outer loops, centering spaces, ascending digit sequences, a live preview, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Diamond halves

Top half grows 1..rows; bottom half mirrors rows-1..1.

Top Loop

i = 1..rows

for (let i = 1; i <= rows; i++) — builds the growing half of the diamond.

Bottom Loop

i = rows-1..1

for (let i = rows - 1; i >= 1; i--) — mirrors the top half back down.

Space + digits

Center rows

Leading spaces then k = 1..2*i-1 appends digits 1 to 2*i-1.

Live Preview

Rows 3–5

Pick a height and draw the centered number diamond in the browser.

O(n²)

Complexity

Each level prints O(n) digits across O(n) levels — total work scales as n².

Introduction

A diamond number pyramid prints odd-length digit rows: 1, 123, 12345, … up to the widest row, then mirrors back down. With rows = 5, the output is a symmetric centered diamond.

In JavaScript you use two outer loops: the first grows rows 1..rows; the second shrinks rows-1..1. Each row appends leading spaces, then digits 1 to 2*i-1 with line += k.

Why it matters?

It combines two-phase loops with centering — a key step after Program 43’s right-aligned triangle.

Key Highlights

2*i-1

Odd-length rows.

Two halves

Top + bottom loops.

Centering

rows - i spaces.

Series Foundation

Follow Program 43; continue to Program 45 next.

In short: top loop i = 1..rows, bottom loop i = rows-1..1, spaces " ".repeat(rows - i), digits k = 1..2*i-1, then console.log(line).

Foundation

📝 Problem & Approach

Given rows = 5, print a centered number diamond: top half grows odd-length digit rows; bottom half mirrors back down.

JavaScript
// rows = 5
//    1
//   123
//  12345
// 1234567
//123456789
// 1234567
//  12345
//   123
//    1

Inputs & Outputs

ItemTypeDescription
rowsnumberHalf-height of the diamond — widest row has 2*rows-1 digits.
inumberOuter loop — row index (top: 1..rows; bottom: rows-1..1).
knumberNumber loop — appends digits 1..2*i-1.

Minimal workflow

Pseudocode
for i from 1 to rows:
    append (rows - i) spaces
    for k from 1 to 2*i-1: append k
    console.log(line)
for i from rows-1 down to 1:
    append (rows - i) spaces
    for k from 1 to 2*i-1: append k
    console.log(line)

Approach comparison

ApproachIdeaBest for
Fixed rows1, 123, …Learning and interviews
User-input rowsparseInt(prompt(), 10)Configurable diamond size
Compact demorows = 3Paper trace before scaling up
Cheat Sheet

⚡ Quick Reference

GoalPattern
Top outer loopfor (let i = 1; i <= rows; i++)
Bottom outer loopfor (let i = rows - 1; i >= 1; i--)
Leading spacesline += " ".repeat(rows - i)
Number loopfor (let k = 1; k < 2 * i; k++)
Append digitline += k
End the rowconsole.log(line)
Program 43 contrastRight-aligned triangle — not a centered diamond
Compare

📋 Fixed vs User Input vs Compact Demo

Same centered number diamond — different ways to control height and trace the loops.

Top loop
i = 1..rows

Growing half

Bottom loop
i = rows-1..1

Mirrored half

Digits
k < 2*i

Odd-length rows

Compact
rows = 3

Quick paper trace

Context

When This Pattern Shows Up

Reach for this pattern when teaching two-phase loops, odd-length sequences, and centered console output.

  1. After Program 43

    Natural follow-up — moves from a right-aligned triangle to a symmetric centered diamond with two outer loops.

  2. Two-phase loop drills

    Practice separating top and bottom halves before tackling hollow or alphabet diamonds.

  3. Console I/O practice

    Combine loops with prompt() for flexible row counts.

  4. Gateway to variants

    Compare Program 43 (right-aligned triangle) and Program 45 (next in series) next.

  5. Not a UI layout tool

    This is a console teaching pattern — not how you build modern app screens.

Key benefit: one small program that locks in two-phase loops, centering spaces, and O(n²) thinking.

Interactive

🔮 Live Preview

Choose a height between 3 and 5 and draw the centered number diamond in the browser.

Try 3, 4, or 5. Levels between 3 and 5 in this preview.

Live result
Press "Draw pattern".
Hands-On

Examples Gallery

Three complete JavaScript programs — fixed rows, prompt() input, and compact demo. Click View Output to reveal sample console results, or Try it Yourself to run the code live.

📚 Getting Started

Print a centered diamond with rows = 5 using space loops and ascending digit sequences.

Example 1 — Fixed rows = 5

Hard-coded row count — ideal for first demos and screenshots.

JavaScript
const rows = 5;

// Top half (1, 123, 12345, ...)
for (let i = 1; i <= rows; i++) {
  let line = " ".repeat(rows - i);
  for (let k = 1; k < 2 * i; k++) {
    line += k;
  }
  console.log(line);
}

// Bottom half (..., 12345, 123, 1)
for (let i = rows - 1; i >= 1; i--) {
  let line = " ".repeat(rows - i);
  for (let k = 1; k < 2 * i; k++) {
    line += k;
  }
  console.log(line);
}
Try it Yourself

How It Works

When i = 1, four spaces center a single 1. When i = 3, two spaces precede 12345. The bottom half mirrors from i = 4 down to 1.

📈 User Input

Read the row count with prompt() instead of hard-coding 5.

Example 2 — User input rows

Read rows with prompt() and validate rows > 0 (check with Number.isFinite in real apps).

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

if (!Number.isFinite(rows) || rows < 1) {
  console.log("Please enter a positive integer.");
} else {
  for (let i = 1; i <= rows; i++) {
    let line = " ".repeat(rows - i);
    for (let k = 1; k < 2 * i; k++) {
      line += k;
    }
    console.log(line);
  }

  for (let i = rows - 1; i >= 1; i--) {
    let line = " ".repeat(rows - i);
    for (let k = 1; k < 2 * i; k++) {
      line += k;
    }
    console.log(line);
  }
}
Try it Yourself

How It Works

Same space-and-number loop core as Example 1; only rows comes from user input instead of being hard-coded as 5.

⚡ Smaller Demo

Run with rows = 3 to trace every row on paper before scaling up.

Example 3 — Compact rows = 3

Same space and number loops with a smaller row count for quick tracing.

JavaScript
const rows = 3;

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

for (let i = rows - 1; i >= 1; i--) {
  let line = " ".repeat(rows - i);
  for (let k = 1; k < 2 * i; k++) {
    line += k;
  }
  console.log(line);
}
Try it Yourself

How It Works

Only rows changes from 5 to 3 — the space and number loops stay identical. Trace i = 1, 2, 3 on paper to see how row length grows as 2*i-1.

🧠 How the Algorithm Prints Rows

1

Set up

No imports needed. Set rows = 5 and loop variables i, k.

Setup
2

Top half loop

for (let i = 1; i <= rows; i++) — builds the growing half of the diamond.

Top
3

Leading spaces

line += " ".repeat(rows - i) — centers each row before digits.

Align
4

Number loop

for (let k = 1; k < 2 * i; k++) then line += k — odd-length digit row.

Print
5

Bottom half loop

for (let i = rows - 1; i >= 1; i--) — mirrors the top half back down.

Mirror
=

Diamond number pyramid complete

Total printed digits grow with diamond area — O(n²) time, O(1) extra memory.

Trace

🔎 Worked Walkthrough — top half rows = 5, row i = 3

Trace row 3 on the top half — spaces, digits printed, and full row output.

StepDetailOutput so far
Spacesrows - i = 2 spaces
k = 1..5Appends 1234512345
console.log(line)End row 312345

Characters per row = 2*i-1. Space count on top half = rows - i. Bottom half repeats rows 4, 3, 2, 1 in reverse.

Use Cases

Where this tiny pattern (and its loop structure) shows up beyond the homework prompt.

1. Teaching Nested Loops

Clearest visual proof that outer and inner bounds interact.

Example: skip the space loop and watch the diamond snap left.

2. Pattern Series Base

Foundation for inverted, pyramid, diamond, and hollow variants.

Example: continue to Program 45 for the next pattern in the series.

3. Console Formatting Drills

Practice line += vs console.log(line) without complex math.

Example: put console.log(line) inside the inner loop by mistake.

4. Padding character

Add spaces between digits once the two-loop structure works.

Example: use line += k + " " between digits for wider spacing.

5. Complexity Intuition

Diamond totals make O(n²) concrete for beginners.

Example: count printed digits for rows = 5 — top half alone prints 25 digits.

6. Input Validation Labs

Pair the pattern with Number.isFinite and prompt() validation.

Example: reject rows <= 0 and re-prompt.

Pro Tip: when an interviewer asks for patterns, explain the outer/inner roles first — then write the loops. The story matters as much as the code.

Advantages

Why this pattern earns a permanent spot in beginner JavaScript courses.

  1. 1. Instant Visual Feedback

    Wrong bounds show up immediately as a broken staircase.

  2. 2. Minimal Concepts

    Only loops and console output — no arrays or math libraries.

  3. 3. Easy to Extend

    Invert, center, hollow, or change the fill character with small edits.

  4. 4. O(1) Extra Memory

    Streaming output needs no storage beyond loop counters.

Pro Tip: trace i, space count, and digit loop on paper for rows = 3 before coding — watch how row length grows as 2*i-1.

Usage Tips

Small habits that keep number-pattern code clean.

  1. 1. Two Outer Loops

    Top half 1..rows and bottom half rows-1..1 — do not repeat the peak row.

  2. 2. Validate with Number.isFinite

    Use Number.isFinite(rows) so bad prompt() input does not crash when converting rows.

  3. 3. Keep console.log Outside the Inner Loop

    Only call console.log(line) after the inner loop finishes the row.

  4. 4. Trace Space Count on Paper

    Mark rows - i spaces before each row’s digits before coding.

  5. 5. Dry-Run rows = 3

    Trace i = 1..3 on paper before coding the full rows = 5 demo.

Pro Tip: if the output is a vertical list of single digits per line, you almost certainly put console.log(line) inside the inner loop.

Common Pitfalls

Mistakes that commonly break centered number diamond patterns.

  1. 1. Newline Inside the Inner Loop

    Each digit lands on its own line — you get a column, not a diamond.

    → Use line += k; console.log(line) only after the number loop.

  2. 2. Skipping the Space Loop

    Without leading spaces, the diamond loses its centered shape.

    → Run the space loop before the number loop on every row.

  3. 3. Wrong Inner Bound

    k < 2 * i + 1 adds an extra digit — row length becomes even instead of odd.

    → Keep for (let k = 1; k < 2 * i; k++) for exactly 2*i-1 digits.

  4. 4. Repeating the Peak Row

    Starting the bottom loop at i = rows prints the widest row twice.

    → Bottom half starts at i = rows - 1, not rows.

  5. 5. Bare parseInt(prompt())

    Letters or empty input yield NaN with bare parseInt(prompt()).

    → Check Number.isFinite(rows) and re-prompt on failure.

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single row diamond

Output is just 1 — one row, no bottom half needed.

rows = 0

Empty pattern

Outer loop never runs — print nothing or show a message.

Negative

rows < 1

Treat as invalid; re-prompt instead of silent empty output.

rows = 2

Smallest diamond

Three rows: 1, 123, 1.

Bad input

Non-numeric input

Bare parseInt(prompt()) yields NaN on bad input — use Number.isFinite first.

Large rows

Large row count

Total lines = 2*rows - 1 — grows quadratically with peak height.

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Right-aligned triangle

2. Top half only

  • Print only i = 1..rows without the mirror
  • See how the growing half works alone

3. Next in series

  • Continue with Program 45
  • Next pattern in the number-pattern series

4. Descending digits

  • Print k from 2*i-1 down to 1
  • Same space loops, reversed number loop
Important

Notes

  • Loop rule. Top i = 1..rows, leading spaces then k = 1..2*i-1. Bottom starts at rows - 1.
  • Build each row with line +=, then console.log(line) once per row.
  • Validate rows > 0 for interactive programs; rows = 1 prints a single centered 1.
  • Bottom half starts at rows - 1 — do not repeat the peak row at i = rows.

Quick Takeaway: top loop i = 1..rows, leading spaces then digits k = 1..2*i-1, bottom i = rows-1..1, then console.log(line).

Analysis

⏱️ Time and Space Complexity

ProgramTimeExtra space
Nested loops (Examples 1–3)O(n²)O(1)
Smaller demo (Example 3)O(n²)O(1)
Wrap Up

🎉 Conclusion

The centered number diamond is a compact lesson in symmetric patterns and centering spaces: append leading spaces, append digits 1 to 2*i-1, grow rows in the top half, then mirror back down. Master the fixed-rows version, then try prompt() input and a smaller trace demo.

Practice the three examples above, then continue to Program 45 for the next pattern in the series.

Bottom half must start at rows - 1 — validate rows when reading from the console.

View Examples Gallery Continue to Program 45
Pro Tips

💡 Best Practices

✅ Do

  • Use top loop for (let i = 1; i <= rows; i++)
  • Bottom loop for (let i = rows - 1; i >= 1; i--)
  • Spaces then digits: line += k for k = 1..2*i-1
  • Check Number.isFinite(rows) after parseInt(prompt())
  • State O(n²) time when asked about complexity

❌ Don’t

  • Call console.log(line) inside the inner loop
  • Start bottom loop at i = rows (repeats peak row)
  • Use k < 2 * i + 1 instead of k < 2 * i
  • Skip the space loop (breaks centering)
  • Ignore bad console input in user-facing demos
  • Skip the rows = 1 edge case
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this number diamond

Print the pattern the beginner-friendly way.

5
Core concepts
△ 01

2*i-1

Digits per row

Definition
↻ 02

Two halves

Top + mirror

Code
% 03

Row width

2*i-1 digits

Code
↓ 04

Bottom start

i = rows-1

Shape
O 05

Complexity

O(n²) time

Analysis
🎯 You’re ready to print a centered number diamond in JavaScript
Review Quick Reference →

❓ Frequently Asked Questions

A centered diamond of ascending digit sequences: 1, 123, 12345, 1234567, 123456789, then mirrors back down to 1.
The row appends 2*i-1 digits (odd length): 1, 3, 5, 7, 9, ... using k from 1 to 2*i-1.
Leading spaces are appended before the numbers. Both halves use line += " ".repeat(rows - i) before the digit loop.
The first loop builds the top half (i = 1..rows). The second mirrors back down (i = rows-1..1) to complete the diamond.
Program 43 is a right-aligned triangle with spaced columns. Program 44 is a symmetric centered diamond with odd-length digit rows.
Replace 5 with a rows variable in both outer loops and space bounds — see Example 2.
O(n²) for n rows because each level appends O(n) digits and there are O(n) levels.
Use parseInt with Number.isFinite and validate rows > 0 before printing.
Only one row prints — a single centered 1.

Did you Know? 🔊

This pattern prints a top half (1..rows) and a bottom half (rows-1..1). Each row appends 2*i-1 digits (1 to 2*i-1) with leading spaces to center the diamond.

Continue to Program 45

Move on to the next pattern in the JavaScript number-pattern series.

Program 45 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.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Number Pattern 43 — Right-Aligned Number Triangle JavaScript Number Pattern 45