Diagonal Mirror Number Diamond in JavaScript

Q: Why does the pattern have two diagonals?

Each row prints the same digit on the left diagonal and the right diagonal; spaces fill the remaining positions.

Q: Why does the bottom loop start at rows-1?

The top half already printed row rows at the peak — starting at rows-1 avoids duplicating the middle line.

Q: What does this diagonal mirror diamond print?

An inverse-V pyramid from 1 to rows, then mirrored back down to 1 — 2*rows-1 lines total.

Q: How is this different from Program 57?

Program 57 prints only the top pyramid half. Program 58 adds a second outer loop from rows-1 down to 1 for the bottom half.

Q: Why use i === j and i === k conditions?

Each column position gets either the row digit or a space — the conditions pick exactly two append positions per row.

Q: How can I change the diamond height?

Change rows or read it from user input with prompt() and parseInt — see Example 2.

Q: What is the time complexity?

O(n²) for n rows because you log 2n-1 lines, each scanning about 2n positions.

Q: Can I print a character instead of a number?

Yes. Replace the digit with '*' in both diagonal append branches.

Q: How should I read rows safely?

Use parseInt with Number.isFinite. Bare parseInt(prompt()) returns NaN on bad input.

Q: What happens when rows is 1?

Only one line logs — the bottom loop (rows-1..1) does not run.

Beginner

⏱️ 10 min read

📚 Updated: Sep 2026

🎯 3 Code Examples

🚀 Live Preview

Nested Loops + Symmetry

Diagonal mirror number diamond output in JavaScript (1, 2 2, 3 3, 4 4, 5 5)

Overview

What You’ll Learn

Program 58 prints a diagonal mirror number diamond: the top half grows from 1 to rows like Program 57, then a second outer loop mirrors back down to 1. This tutorial covers top/bottom halves, conditional diagonal printing, a live preview, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Full diamond

Top half: row i prints digit i on mirror diagonals. Bottom half: same logic with i counting down.

Top Outer Loop

i = 1..rows

for (let i = 1; i <= rows; i++) — same pyramid half as Program 57.

Bottom Outer Loop

i = rows-1..1

for (let i = rows - 1; i >= 1; i--) — mirrors the top half without repeating the peak row.

Left Diagonal

j = rows..1

line += (i === j) ? i : " " — reused in both outer loops.

Right Diagonal

k = 2..rows

line += (i === k) ? i : " " — mirrors the left half from column 2 onward.

O(n²)

Complexity

2×rows-1 lines, each scanning about 2×rows-1 positions — total work grows as O(n²).

Introduction

A diagonal mirror number diamond extends Program 57’s pyramid: print the top half from 1 to rows, then mirror back down with a second outer loop from rows-1 to 1. With rows = 5, you get nine lines — peak at row 5, then symmetric descent to a single 1.

Each row reuses Program 57’s inner loops: left diagonal j = rows..1, right diagonal k = 2..rows, appending the digit only when i === j or i === k.

Why it matters?

It bridges Program 57’s single pyramid to full symmetry — one extra outer loop turns a half-pattern into a complete diamond.

Key Highlights

Top half

i = 1..rows — pyramid grows upward.

Bottom half

i = rows-1..1 — mirror without repeating peak.

vs Program 57

Program 57 is the top half only; Program 58 adds the mirrored bottom loop.

Series Foundation

Follow Program 57; continue to Program 59 next.

In short: top loop 1..rows, bottom loop rows-1..1, same inner diagonal logic per row, then console.log(line).

Foundation

📝 Problem & Approach

Given row count rows = 5, print a diagonal mirror number diamond — top half 1..rows, bottom half rows-1..1, with mirror diagonals on every line.

JavaScript

// rows = 5
//     1
//    2 2
//   3   3
//  4     4
// 5       5
//  4     4
//   3   3
//    2 2
//     1

Inputs & Outputs

Item	Type	Description
`rows`	int	Half-height — diamond has `2×rows-1` total lines.
`i` (top outer)	int	Runs `1` to `rows` — builds the upper half.
`i` (bottom outer)	int	Runs `rows-1` down to `1` — mirrors without repeating peak.
`j` (left)	int	Scans `rows..1` — appends digit when `i === j`.
`k` (right)	int	Scans `2..rows` — prints digit when `i == k`.
Total lines	int	`rows + (rows - 1) = 2×rows - 1`.

Minimal workflow

Pseudocode

for i from 1 to rows:
    print row i with left and right diagonal logic
for i from rows - 1 down to 1:
    print row i with same inner loop logic

Approach comparison

Approach	Idea	Best for
Two outer loops	Top `1..rows`, bottom `rows-1..1`	Learning and interviews
Reuse inner logic	Same `j` and `k` loops in both halves	DRY diamond patterns
User-input rows	`prompt()` + `parseInt()`	Flexible diamond size
Compact trace	`rows = 3` on paper first	Quick dry-runs before full demo
Character swap	Replace digit with `*` for an X-diamond	Visual debugging

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Top outer loop	`for (let i = 1; i <= rows; i++)`
Bottom outer loop	`for (let i = rows - 1; i >= 1; i--)`
Left diagonal	`for (let j = rows; j >= 1; j--) line += (i === j) ? i : " "`
Right diagonal	`for (let k = 2; k <= rows; k++) line += (i === k) ? i : " "`
End row	`console.log(line)`
Program 57 contrast	Program 57 is top half only; Program 58 adds bottom mirror loop

Compare

📋 Fixed Rows vs User Input vs Compact Trace

Same diagonal mirror diamond — three ways to set row count and trace the logic.

Fixed rows

rows = 5

Hard-coded half-height for demos

User input

parseInt(prompt())

Read row count from console

Compact trace

rows = 3

5-line diamond dry-run

Top half

i = 1..rows

Program 57 pyramid logic

Bottom half

i = rows-1..1

Mirror without peak repeat

Context

When This Pattern Shows Up

Reach for this pattern when teaching symmetry, mirroring loops, and extending a half-pattern into a full diamond.

Post Program 57 exercise
Natural follow-up after Program 57’s pyramid — one extra outer loop completes the diamond.
Symmetry drills
Top and bottom halves share inner logic — good bridge to palindrome and mirror problems.
Two outer loops
Separate top and bottom boundaries — concrete loop-boundary practice.
Gateway to Program 59
Compare this hollow diamond with the next pattern in the series.
Not a UI layout tool
This is a console teaching pattern — not how you build modern app screens.

Key benefit: one small extension that locks in mirroring, symmetry, and O(n²) thinking.

Interactive

🔮 Live Preview

Choose row count between 3 and 9 and draw the centered diagonal mirror number diamond in the browser.

Hands-On

Examples Gallery

Three complete JavaScript programs — fixed rows, user input, and a compact trace demo. Click View Output to reveal sample console results, or Try it Yourself to run in the browser.

📚 Getting Started

Print a full diagonal mirror diamond with half-height five — top loop 1..rows, bottom loop rows-1..1.

Example 1 — Fixed `rows = 5`

Hard-coded half-height — log the top pyramid, then mirror with a second outer loop using the same inner diagonal logic.

JavaScript

const rows = 5;

for (let i = 1; i <= rows; i++) {
  let line = "";

  for (let j = rows; j >= 1; j--) {
    line += (i === j) ? i : " ";
  }

  for (let k = 2; k <= rows; k++) {
    line += (i === k) ? i : " ";
  }

  console.log(line);
}

for (let i = rows - 1; i >= 1; i--) {
  let line = "";

  for (let j = rows; j >= 1; j--) {
    line += (i === j) ? i : " ";
  }

  for (let k = 2; k <= rows; k++) {
    line += (i === k) ? i : " ";
  }

  console.log(line);
}

Try it Yourself

How It Works

The first outer loop prints rows 1 through 5 (Program 57 logic). The second outer loop prints rows 4 down to 1 — reusing the same inner loops so the bottom half mirrors the top without repeating row 5.

📈 User Input

Read half-height with prompt() and Number.isFinite validation.

Example 2 — User Input Rows

Read rows with prompt() and validate the result.

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 = "";

    for (let j = rows; j >= 1; j--) {
      line += (i === j) ? i : " ";
    }

    for (let k = 2; k <= rows; k++) {
      line += (i === k) ? i : " ";
    }

    console.log(line);
  }

  for (let i = rows - 1; i >= 1; i--) {
    let line = "";

    for (let j = rows; j >= 1; j--) {
      line += (i === j) ? i : " ";
    }

    for (let k = 2; k <= rows; k++) {
      line += (i === k) ? i : " ";
    }

    console.log(line);
  }
}

Try it Yourself

How It Works

Same top-and-bottom outer loops as Example 1; only the source of rows changes from a literal to user input.

⚡ Compact Trace

Smaller half-height for quick tracing on paper or in interviews.

Example 3 — Compact `rows = 3`

Use rows = 3 for a 5-line diamond — trace both outer loops before scaling to 5.

JavaScript

const rows = 3;

for (let i = 1; i <= rows; i++) {
  let line = "";

  for (let j = rows; j >= 1; j--) {
    line += (i === j) ? i : " ";
  }

  for (let k = 2; k <= rows; k++) {
    line += (i === k) ? i : " ";
  }

  console.log(line);
}

for (let i = rows - 1; i >= 1; i--) {
  let line = "";

  for (let j = rows; j >= 1; j--) {
    line += (i === j) ? i : " ";
  }

  for (let k = 2; k <= rows; k++) {
    line += (i === k) ? i : " ";
  }

  console.log(line);
}

Try it Yourself

How It Works

With half-height 3 you get 5 total lines — enough to trace top loop, peak row, and bottom mirror on paper before the full demo.

🧠 How the Algorithm Prints Rows

Set rows

rows = 5 is half-height — the diamond prints 2×rows-1 = 9 lines.

Setup

Print top half

for (let i = 1; i <= rows; i++) — Program 57 pyramid logic with left and right diagonal inner loops.

Top half

Print bottom half

for (let i = rows - 1; i >= 1; i--) — same inner loops, counting down to avoid repeating the peak row.

Bottom half

Diagonal logic per row

Left j = rows..1, right k = 2..rows — append digit when i === j or i === k, else space.

Diagonals

Diagonal mirror diamond complete

2×rows-1 lines total — O(n²) time, O(1) extra memory.

Trace

🔎 Worked Walkthrough — `rows = 5`

Trace each line’s half (top or bottom), row index, and diagonal hits — nine lines total.

Line	Half	`i`	Left hit	Right hit
1	Top	`1`	`j=1`	(none)
2	Top	`2`	`j=2`	`k=2`
3	Top	`3`	`j=3`	`k=3`
4	Top	`4`	`j=4`	`k=4`
5	Top (peak)	`5`	`j=5`	`k=5`
6	Bottom	`4`	`j=4`	`k=4`
7	Bottom	`3`	`j=3`	`k=3`
8	Bottom	`2`	`j=2`	`k=2`
9	Bottom	`1`	`j=1`	(none)

The bottom loop starts at rows-1 so line 5 (peak) is not printed twice — total lines = 2×rows-1.

Use Cases

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

1. Teaching Nested Loops

Two inner loops with conditional printing — classic diagonal placement drill.

Example: trace each row in the walkthrough table — left hit, right hit.

2. Diagonal Drills

Each row mirrors digits on two diagonals — compare with Program 53’s single diagonal V-shape.

Example: row 5 prints 5 at column 5 and again at column 9.

3. Output Formatting Drills

Practice building one line string per row with digit-or-space decisions per column.

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

4. Why k starts at 2

Starting the right loop at 2 avoids a third digit at the center — keeps exactly two prints per row.

Example: try k = 1 and see the center digit triple on some rows.

5. Complexity Intuition

Each row scans about 2n positions — makes O(n²) concrete for beginners.

Example: row 5 with rows = 5 scans 9 character slots — see the walkthrough table.

6. Input Validation Labs

Pair the pattern with Number.isFinite and positive-row validation after parseInt(prompt()).

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

Pro Tip: when an interviewer asks for patterns, explain 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. Instant Visual Feedback
The full diamond is instantly recognizable — top half grows, bottom half mirrors symmetrically.
2. Real Math Connection
Conditional digit-or-space printing teaches real console alignment — not abstract loop drill.
3. Easy to Extend
Swap digits for * to get an X-diamond, or try fixed-width formatting for rows beyond 9.
4. O(1) Extra Memory
Streaming output needs no storage beyond loop counters.

Pro Tip: trace rows = 3 on paper — 5 lines total, peak at row 3, then mirror back to 1.

Usage Tips

Small habits that keep number-pattern code clean.

1. Left loop: j = rows..1
Append the digit when i === j; otherwise append a single space.
2. Validate User Input
Avoid crashing when the user types letters instead of a number.
3. Newline After Both Inner Loops
Only call console.log(line) after both inner loops finish the row.
4. Right loop starts at k = 2
Use for (let k = 2; k <= rows; k++) so the center position is not duplicated.
5. Dry-Run rows = 5
Trace five rows on paper before coding the full 10-row demo.

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

Common Pitfalls

Mistakes that commonly break diagonal mirror number diamond patterns.

1. console.log() Inside Inner Loop
Each digit lands on its own line — you get a column, not a pyramid.
→ Use line += (i === j) ? i : " "; call console.log(line) only after both inner loops.
2. Right Loop Starts at 1
Starting at k = 1 can print a third digit at the center — row looks crowded.
→ Use for (let k = 2; k <= rows; k++) — mirror from column 2 onward.
3. Wrong Condition Check
Using j === rows instead of i === j places digits on the wrong diagonal.
→ Always compare the outer row index i with the inner loop variable j or k.
4. Forgetting Newline After Row
All numbers print on one long line without row breaks.
→ Call console.log(line) after both inner loops complete.
5. Unchecked parseInt(prompt())
Letters or empty input yield NaN or leave rows invalid.
→ Validate with Number.isFinite(rows) and check rows >= 1 before drawing.

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single row

Output is just 1 — the right loop (k = 2..1) does not run.

rows = 0

Empty output

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

Negative

`rows < 0`

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

rows = 5

Compact trace

Bottom row has two copies of 5 across 9 positions — good for dry-runs before scaling up.

Bad input

Non-numeric input

Bare parseInt(prompt()) returns NaN — validate with Number.isFinite.

Large rows

Wide output

Row 9 scans 17 character positions (2×9-1) — total work grows as O(n²).

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Compare with Program 57

Program 57 prints only the top pyramid half
Program 58 adds bottom loop rows-1..1 for the full diamond

2. Avoid duplicate peak

Try starting bottom loop at rows and see the middle row print twice
Fix by starting at rows-1

3. Next in series

Continue with Program 59
Build on diagonal mirror patterns

4. Character swap

Replace digit appends with "*" in both diagonal branches
Same loops, clean X-diamond for visual debugging

Important

Notes

Two outer loops. Top: i = 1..rows. Bottom: i = rows-1..1. Same inner diagonal logic in both.
Build one line string per row with += — call console.log(line) only after both inner loops finish.
Validate rows > 0 for interactive programs; rows = 1 prints one line — bottom loop does not run.
Diamond has 2×rows-1 lines, each scanning about 2×rows-1 positions — total work grows as O(n²).

Quick Takeaway: top 1..rows, bottom rows-1..1, same inner diagonal logic, then console.log(line).

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Nested loops (Examples 1–3)	`O(n²)`	`O(1)`
Digits on row i	`2i - 1`	No storage beyond loop counters

Wrap Up

🎉 Conclusion

The diagonal mirror number diamond is a natural follow-up to Program 57: one extra outer loop mirrors the pyramid into a full symmetric diamond. Master the fixed-rows version, then try user input and the compact 3-row trace.

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

Total output is 2×rows-1 lines — peak at row rows, then mirrored descent to 1.

View Examples Gallery Continue to Program 59

Pro Tips

💡 Best Practices

✅ Do

Left: for (let j = rows; j >= 1; j--) with if (i === j)
Right: for (let k = 2; k <= rows; k++) with if (i === k)
Append a single space for non-matching positions
Call console.log(line) after both inner loops
Use Number.isFinite after parseInt(prompt()) for user input

❌ Don’t

Start right loop at k = 1 — can triple-print at center
Use j === rows instead of i === j — wrong diagonal
Call console.log() inside any inner loop
Ignore bad console input in user-facing demos
Skip the rows = 3 dry-run before coding rows = 5

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this diagonal mirror diamond

Print the full mirror-diagonal diamond the beginner-friendly way.

Core concepts

△ 01

Rule

2×rows-1 lines

Definition

▦ 02

Left

j = rows..1

Code

↑ 03

Right

k = 2..rows

Code

↓ 04

Check

i === j or i === k

Logic

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

Why does the pattern have two diagonals?

Each row prints the same digit on the left diagonal and the right diagonal; spaces fill the remaining positions.

Why does the bottom loop start at rows-1?

The top half already printed row rows at the peak — starting at rows-1 avoids duplicating the middle line.

What does this diagonal mirror diamond print?

An inverse-V pyramid from 1 to rows, then mirrored back down to 1 — 2*rows-1 lines total.

How is this different from Program 57?

Program 57 prints only the top pyramid half. Program 58 adds a second outer loop from rows-1 down to 1 for the bottom half.

Why use i === j and i === k conditions?

Each column position gets either the row digit or a space — the conditions pick exactly two append positions per row.

How can I change the diamond height?

Change rows or read it from user input with prompt() and parseInt — see Example 2.

What is the time complexity?

O(n²) for n rows because you log 2n-1 lines, each scanning about 2n positions.

Can I print a character instead of a number?

Yes. Replace the digit with '*' in both diagonal append branches.

How should I read rows safely?

Use parseInt with Number.isFinite. Bare parseInt(prompt()) returns NaN on bad input.

What happens when rows is 1?

Only one line logs — the bottom loop (rows-1..1) does not run.

Did you Know? 🔊

Print the Program 57 pyramid for the top half, then mirror with for (let i = rows - 1; i >= 1; i--). Total lines = 2×rows-1 — each row scans about 2×rows-1 positions.

Continue to Program 59

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

Program 59 tutorial →

About the author

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 57 — Diagonal Mirror Number Pyramid JavaScript Number Pattern 59

Diagonal Mirror Number Diamond in JavaScript

What You’ll Learn

Shape Rule

Top Outer Loop

Bottom Outer Loop

Left Diagonal

Right Diagonal

O(n²)

Introduction

Why it matters?

Top half

Bottom half

vs Program 57

Series Foundation

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 Fixed Rows vs User Input vs Compact Trace

When This Pattern Shows Up

Post Program 57 exercise

Symmetry drills

Two outer loops

Gateway to Program 59

Not a UI layout tool

🔮 Live Preview

Examples Gallery

📚 Getting Started

Example 1 — Fixed rows = 5

How It Works

📈 User Input

Example 2 — User Input Rows

How It Works

⚡ Compact Trace

Example 3 — Compact rows = 3

How It Works

🧠 How the Algorithm Prints Rows

Set rows

Print top half

Print bottom half

Diagonal logic per row

Diagonal mirror diamond complete

🔎 Worked Walkthrough — rows = 5

Use Cases

1. Teaching Nested Loops

2. Diagonal Drills

3. Output Formatting Drills

4. Why k starts at 2

5. Complexity Intuition

6. Input Validation Labs

Advantages

1. Instant Visual Feedback

2. Real Math Connection

3. Easy to Extend

4. O(1) Extra Memory

Usage Tips

1. Left loop: j = rows..1

2. Validate User Input

3. Newline After Both Inner Loops

4. Right loop starts at k = 2

5. Dry-Run rows = 5

Common Pitfalls

1. console.log() Inside Inner Loop

2. Right Loop Starts at 1

3. Wrong Condition Check

4. Forgetting Newline After Row

5. Unchecked parseInt(prompt())

Edge Cases

Single row

Empty output

rows < 0

Compact trace

Non-numeric input

Wide output

🎯 Practice Problems

1. Compare with Program 57

2. Avoid duplicate peak

3. Next in series

4. Character swap

Example 1 — Fixed `rows = 5`

Example 3 — Compact `rows = 3`

🔎 Worked Walkthrough — `rows = 5`

`rows < 0`