JavaScript Diamond Diagonal Number Pattern

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

What Is This Pattern?

A mirror diagonal diamond is Program 53’s V-shape plus a mirrored bottom half — digits climb 1..n on both diagonals, then descend back to 1.

Remember
Rule: top V (1..n), then bottom mirror (n-1..1)

1       1
 2     2
  3   3
   4 4
    5
   4 4
  3   3
 2     2
1       1   ← rows = 5

Unlike Program 53 (top V only), this adds a second outer loop from rows - 1 down to 1 — total lines = 2n - 1.

How to Solve It

Reuse the same row logic twice: ascend i = 1..rows, then descend i = rows-1..1.

MethodIdeaBest for
Top + bottomSame i === j / i === k row builder, two outer loopsClassic diamond demos
CompactSame logic with fewer rows (e.g. 3)Quick dry-runs

Pseudocode

Pseudocode
function printRow(i):
    line = ""
    for j from 1 to rows:          // left
        append i if i === j else " "
    for k from rows-1 down to 1:   // right
        append i if i === k else " "
    print line

for i from 1 to rows:              // top
    printRow(i)
for i from rows-1 down to 1:       // bottom
    printRow(i)

Cheat sheet

GoalPattern
Top halffor (let i = 1; i <= rows; i++)
Bottom halffor (let i = rows - 1; i >= 1; i--)
Left diagonalline += (i === j ? i : " ");
Right diagonalline += (i === k ? i : " "); with k from rows-1..1
End the rowconsole.log(line);
Total lines2 * rows - 1

Printing Numbers vs Starting a New Line

APIEffectUse for
line += …Stays on the same rowEach digit or space
console.log(line)Ends the current rowAfter both diagonal halves finish

Append without a newline, then end the row once.

Live Preview

Change the size and the diagonal diamond updates instantly.

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

Live result rows = 5 · 9 lines
1       1
 2     2
  3   3
   4 4
    5
   4 4
  3   3
 2     2
1       1

Worked Walkthrough

Trace key lines when rows = 5 — top climb, peak, then bottom mirror.

HalfiRolePrinted row
Top1First V row1 1
Top5Peak (once)5
Bottom4First mirror4 4
Bottom1Last row1 1

The bottom loop starts at rows - 1 so the peak line is never printed twice.

JavaScript Programs

Three complete programs: fixed rows = 5, prompt input, and a compact rows = 3 demo. Use View Output for samples, or Try It Yourself to edit and run live.

Example 1 — Fixed rows = 5

Top loop prints the V; bottom loop mirrors it from rows - 1 down to 1.

JavaScript
const rows = 5;

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

for (let i = rows - 1; i >= 1; i--) {
  let line = "";
  for (let j = 1; j <= rows; j++) {
    line += (i === j ? i : " ");
  }
  for (let k = rows - 1; k >= 1; k--) {
    line += (i === k ? i : " ");
  }
  console.log(line);
}
Try It Yourself

How It Works

1. Top half builds the V. Same as Program 53 — digit on i === j and i === k, spaces elsewhere.

2. Bottom half mirrors it. Loop i from rows - 1 down to 1 with identical inner logic.

3. Peak prints once. Starting the bottom at rows - 1 avoids a double middle row.

Example 2 — User Input Rows

Read rows with prompt and validate before drawing.

JavaScript
const rows = parseInt(prompt("Enter number of rows:"), 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 = 1; j <= rows; j++) {
      line += (i === j ? i : " ");
    }
    for (let k = rows - 1; k >= 1; k--) {
      line += (i === k ? i : " ");
    }
    console.log(line);
  }

  for (let i = rows - 1; i >= 1; i--) {
    let line = "";
    for (let j = 1; j <= rows; j++) {
      line += (i === j ? i : " ");
    }
    for (let k = rows - 1; k >= 1; k--) {
      line += (i === k ? i : " ");
    }
    console.log(line);
  }
}
Try It Yourself

How It Works

1. Prompt and validate. Use parseInt and require rows >= 1.

2. Same diamond core. Only the source of rows changes — top and bottom halves match Example 1.

3. Entering 4. Seven lines total (2×4 - 1), peak digit is 4.

Example 3 — Compact rows = 3

Same top + bottom logic with fewer rows for a quick visual check.

JavaScript
const rows = 3;

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

for (let i = rows - 1; i >= 1; i--) {
  let line = "";
  for (let j = 1; j <= rows; j++) {
    line += (i === j ? i : " ");
  }
  for (let k = rows - 1; k >= 1; k--) {
    line += (i === k ? i : " ");
  }
  console.log(line);
}
Try It Yourself

How It Works

1. Shrink the size. Only rows changes — still top climb then bottom mirror.

2. Easier to trace. Five lines total — useful while learning the two outer loops.

3. Same peak rule. The middle digit still appears only once.

Edge Cases & Pitfalls

Check these before calling the solution done.

Peak skip

Start the bottom loop at rows - 1

Starting at rows duplicates the middle tip line.

Center skip

Right inner loop still starts at rows - 1

Same as Program 53 — including k = rows doubles the center column.

rows = 1

Single-row case

Output is just 1 — the bottom loop never runs.

Bad input

Validate parseInt

Check Number.isFinite(rows) and require rows >= 1 before the loops.

Time and Space Complexity

ProgramTimeExtra space
Fixed / compact (Examples 1, 3)O(n²)O(n) per row string
User input (Example 2)O(n²)O(n) per row string

About 2n - 1 lines, each scanning about 2n - 1 positions — still quadratic in n.

Key Takeaways

  • Rule: Program 53’s V on top, then mirror it downward.
  • Peak once: start the bottom loop at rows - 1.
  • Break the row: call console.log(line) only after both diagonal halves finish.
  • Complexity: O(n²) — ~2n lines × ~2n chars.

One line: print the diagonal V upward, then reuse the same row logic downward from n - 1.

Frequently Asked Questions

The first loop prints the top V-half (i = 1..rows). The second prints the bottom half (rows-1 down to 1), mirroring the shape.
Starting at rows would print the middle row twice. rows-1 skips the peak already printed by the top half.
Program 53 prints only the top V-half. Program 54 adds a second outer loop to mirror the same row logic downward.
line += appends on the same row. console.log(line) ends the row after both diagonal halves finish.
The left loop uses i === j for the main diagonal. The right loop uses i === k for the mirrored diagonal, with spaces elsewhere.
O(n²) for n rows because the diamond has about 2n-1 lines and each line scans about 2n-1 positions.
Yes — write a function that builds one row for a given i, then call it from both outer loops.
One line prints a single 1 — the top loop runs once and the bottom loop does not run.

Did you know?

Program 53’s V-shape becomes a full diamond by adding a second outer loop from rows-1 down to 1. Total lines = 2n-1 with about 2n-1 characters each — O(n²) overall.

Next: Column-Wise Number Triangle

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

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