Full Concentric Number Diamond in JavaScript

Beginner

⏱️ 9 min read

📚 Updated: Sep 2026

🎯 3 Code Examples

🚀 Live Preview

Nested Loops + Symmetry

Full concentric number diamond output in JavaScript (9x9 grid, 5..1..5 pattern)

Overview

What You’ll Learn

Program 47 prints a full concentric number diamond: top half peels from k to 1, then the bottom half mirrors from 2 back to k — a natural step after Program 46’s top-half square. This tutorial covers two outer loops with j > i logic, a live preview, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Full diamond

Top half i = k..1, bottom half i = 2..k — complete symmetric diamond.

Top Outer Loop

i = k..1

for (let i = k; i >= 1; i--) builds layers from outside down to center.

Bottom Outer Loop

i = 2..k

for (let i = 2; i <= k; i++) mirrors rows back out — skip i = 1 (already printed).

Cell Rule

j > i

j > i ? j : i — append outer column j or current layer i.

Live Preview

k = 3..7

Pick outer value k and draw the full concentric diamond in the browser.

O(k²)

Complexity

k top rows + k - 1 bottom rows × 2k - 1 columns — total ≈ (2k-1)² prints.

Introduction

A concentric number diamond prints layers that decrease toward the center, then mirror back out to form a complete symmetric shape. With k = 5, the grid is 9 × 9 — the center cell is 1.

In JavaScript two outer loops handle top (i = k..1) and bottom (i = 2..k) halves; each row uses two inner loops and the j > i rule with line +=.

Why it matters?

It extends Program 46 with a bottom-half loop — the key step from half-pattern to full diamond symmetry.

Key Highlights

Two outers

Top k..1, bottom 2..k.

Left + right

Two inner loops per row.

vs Program 46

Program 46 is top half only; Program 47 adds the bottom mirror.

Series Foundation

Follow Program 46; continue to Program 48 next.

In short: top loop i = k..1, bottom loop i = 2..k, cell rule j > i ? j : i, then console.log(line).

Foundation

📝 Problem & Approach

Given outer value k = 5, print a full concentric number diamond — top half peels to 1, bottom half mirrors back out.

JavaScript

// k = 5 (9x9)
//5 5 5 5 5 5 5 5 5
//5 4 4 4 4 4 4 4 5
//5 4 3 3 3 3 3 4 5
//5 4 3 2 2 2 3 4 5
//5 4 3 2 1 2 3 4 5
//5 4 3 2 2 2 3 4 5
//5 4 3 3 3 3 3 4 5
//5 4 4 4 4 4 4 4 5
//5 5 5 5 5 5 5 5 5

Inputs & Outputs

Item	Type	Description
`k`	number	Outer (maximum) number — also sets row count and half-width.
`i` (top)	number	Top outer loop — layer value from k down to 1.
`i` (bottom)	number	Bottom outer loop — layer value from 2 up to k.
`j`	number	Inner loop — column index for left (k..1) or right (2..k) half.
Grid size	number	`2 × k - 1` rows and columns (9 when k = 5).

Minimal workflow

JavaScript

for (let i = k; i >= 1; i--) {           // top half
  let line = "";
  for (let j = k; j >= 1; j--) line += (j > i ? j : i) + " ";
  for (let j = 2; j <= k; j++) line += (j > i ? j : i) + " ";
  console.log(line);
}
for (let i = 2; i <= k; i++) {           // bottom half
  let line = "";
  for (let j = k; j >= 1; j--) line += (j > i ? j : i) + " ";
  for (let j = 2; j <= k; j++) line += (j > i ? j : i) + " ";
  console.log(line);
}

Approach comparison

Approach	Idea	Best for
Two outer loops + ternary	9×9 diamond for k = 5	Learning and interviews
User-input k	`parseInt(prompt())`	Flexible outer value
Ternary operator	`j > i ? j : i`	Compact one-liner per cell

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Top half	`for (let i = k; i >= 1; i--)`
Bottom half	`for (let i = 2; i <= k; i++)`
Left half	`for (let j = k; j >= 1; j--)`
Right half	`for (let j = 2; j <= k; j++)`
Cell rule	`line += (j > i ? j : i) + " "`
Ternary form	`line += (j > i ? j : i) + " "`
Grid size	`2 × k - 1` rows and columns
Program 46 contrast	Top-half square only — Program 47 adds bottom mirror loop

Compare

📋 Fixed k vs User Input vs Compact k=3

Same full diamond — different ways to set k and trace the two outer loops.

Top half

i = k..1

Peel toward center

Bottom half

i = 2..k

Mirror back out

Left half

j = k..1

Descending columns

Right half

j = 2..k

Mirror without center dup

Cell rule

j > i ? j : i

Outer or layer value

Context

When This Pattern Shows Up

Reach for this pattern when teaching symmetric output, layer logic, and dual inner loops.

Post Program 46 exercise
Natural follow-up after Program 46 — adds the bottom-half outer loop for a complete diamond.
Two outer loops
Top (k..1) and bottom (2..k) teach full vertical symmetry.
Layer / peel logic
j > i selects which concentric ring each cell belongs to.
Gateway to variants
Compare Program 46 (top half) and Program 48 (next in series) next.
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 nested loops, symmetry, and O(k²) thinking.

Interactive

🔮 Live Preview

Choose outer value k between 3 and 7 and draw the full concentric diamond in the browser.

Hands-On

Examples Gallery

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

📚 Getting Started

Print a full concentric number diamond with k = 5 using two outer loops and the j > i rule.

Example 1 — Fixed `k = 5`

Hard-coded outer value — top half then bottom half for a complete 9×9 diamond.

JavaScript

const k = 5;

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

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

Try it Yourself

How It Works

The first outer loop prints rows i = 5..1 (top half). The second prints i = 2..5 (bottom half) — row i = 1 is skipped because it was already the center row.

📈 User Input

Read outer value k from the console instead of hard-coding 5.

Example 2 — User Input k

Read k with prompt() and reject non-positive values — both halves adjust automatically.

JavaScript

const kInput = prompt("Enter k:");
const k = parseInt(kInput, 10);

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

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

Try it Yourself

How It Works

Same two-pass structure as Example 1; only the source of k changes. Grid size becomes 2k - 1 rows and columns.

⚡ Compact k = 3

Smaller outer value for quick tracing — 5 rows total (3 top + 2 bottom).

Example 3 — Compact `k = 3`

Use k = 3 to trace both outer loops quickly on paper or in interviews.

JavaScript

const k = 3;

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

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

Try it Yourself

How It Works

Five rows total — three from the top loop, two from the bottom (skipping center duplicate). Easy to dry-run before scaling to k = 5.

🧠 How the Algorithm Prints Rows

Set up

No imports needed. Set k = 5 as the outer value and row/layer count.

Setup

Print top half

for (let i = k; i >= 1; i--) walks layers from outside down to center row.

Grid

Left half (j = k..1)

If j > i print j; else print i — builds descending left side.

Condition

Mirror bottom half

for (let i = 2; i <= k; i++) builds rows back out — skips i = 1 (center already done).

Bottom

New line per row

console.log(line) after both inner loops finish each row.

Break

Concentric diamond complete

Grid size 2k - 1 × 2k - 1 — O(k²) time, O(1) extra memory.

Trace

🔎 Worked Walkthrough — row `i = 3`, `k = 5`

Trace left-half columns j on row 3 — which value prints for each cell.

`j`	`j > i?`	Prints
`5`	Yes	`5`
`4`	Yes	`4`
`3`	No	`3` (i)
`2`	No	`3` (i)
`1`	No	`3` (i)

Left half of center row (i = 1): 5 4 3 2 1. Right half mirrors to 2 3 4 5 — full center row: 5 4 3 2 1 2 3 4 5. Bottom loop then prints rows i = 2..5 to complete the 9×9 diamond.

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: change k to 3 for a quick trace — see Example 3.

2. Pattern Series Base

Foundation for concentric layers, symmetric grids, and peel-down patterns.

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

3. Console Formatting Drills

Practice building a line string vs calling console.log() without complex math.

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

4. Symmetry Practice

Two inner loops teach left-right mirroring without string reversal.

Example: trace row i = 3 in the walkthrough table.

5. Complexity Intuition

2k - 1 rows × 2k - 1 columns makes O(k²) concrete.

Example: count cells for k = 5 — 9 × 9 = 81 prints.

6. Input Validation Labs

Pair the pattern with Number.isFinite() and positive-row checks.

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. Instant Visual Feedback
Wrong bounds show up immediately as a broken staircase.
2. Minimal Concepts
Only loops and console output — no arrays or math libraries.
3. Easy to Extend
Change k, use ternary form, or trace with k = 3 for quick dry-runs.
4. O(1) Extra Memory
Streaming output needs no storage beyond loop counters.

Pro Tip: trace row i = 3 on paper — watch how j > i switches from outer values to the current layer.

Usage Tips

Small habits that keep number-pattern code clean.

1. Use the k Variable
Never hard-code 5 in loop bounds — use k everywhere.
2. Validate with Number.isFinite()
Avoid crashes when the user types letters instead of a number for k.
3. Keep Newline Outside
Only call console.log(line) after both inner loops finish the row.
4. Two Inner Loops
Left half uses j = k..1; right half uses j = 2..k — do not repeat j = 1 on the right.
5. Dry-Run k = 3
Trace all three rows on paper before coding the full k = 5 demo.

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

Common Pitfalls

Mistakes that commonly break concentric number diamond patterns.

1. Newline Inside the Inner Loop
Each cell lands on its own line — you get a column, not a diamond.
→ Use line += (j > i ? j : i) + " " per cell; console.log(line) only after both inner loops.
2. Right Loop Starts at 2
Starting the right half at j = 1 duplicates the center digit on every row.
→ Use for (let j = 2; j <= k; j++) for the mirror half.
3. Forgetting Bottom Half
Only the top loop runs — output stops at the center row like Program 46.
→ Add for (let i = 2; i <= k; i++) with the same inner loops after the top half.
4. k Too Small
k = 1 prints a single 1; k = 2 gives a minimal 3×3 diamond.
→ Validate k >= 2 for interactive programs expecting a visible pattern.
5. Bare parseInt(prompt())
Letters or empty input return NaN with bare parseInt(prompt()).
→ Catch ValueError and re-prompt on failure.

Edge Cases

Check these inputs before calling the solution done.

k = 1

Single cell

Output is just 1 on one line — no layers to peel.

k = 0

Empty pattern

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

Negative

`k < 0`

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

k = 2

Minimal diamond

3×3 grid — 2 2 2, 2 1 2, 2 2 2.

Bad input

Non-numeric input

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

Large rows

Large row count

Each row prints 2k - 1 cells — total work grows as k².

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Concentric square

Review Program 46’s top-half only pattern
Compare with Program 46

2. Change k

Try k = 4 or k = 7 — grid becomes (2k-1)×(2k-1)
Same two outer loops, different size

3. Next in series

Continue with Program 48
Build on full-diamond logic

4. Skip center duplicate

Bottom loop starts at i = 2, not i = 1
Prevents printing the center row twice

Important

Notes

Two outer loops. Top: i = k..1. Bottom: i = 2..k (skip center duplicate). Same inner loops and cell rule in both.
Build each row in a line string; call console.log(line) only after both inner loops finish.
Validate k > 0 for interactive programs; k = 1 prints a single 1.
2k - 1 rows × 2k - 1 columns — total prints ≈ (2k - 1)².

Quick Takeaway: top loop i = k..1, bottom loop i = 2..k, cell rule j > i ? j : i, then console.log(line).

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Nested loops (Examples 1–3)	`O(k²)`	`O(1)`
Smaller demo (Example 3)	`O(k²)`	`O(1)`

Wrap Up

🎉 Conclusion

The concentric number diamond extends Program 46 with a bottom-half outer loop: top (i = k..1) plus bottom (i = 2..k) using the same j > i cell rule. Master the fixed-k version, then try user input and the compact k = 3 trace.

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

Two outer loops — top k..1, bottom 2..k — skip i = 1 in the bottom loop to avoid duplicating the center row.

View Examples Gallery Continue to Program 48

Pro Tips

💡 Best Practices

✅ Do

Top: for (let i = k; i >= 1; i--), Bottom: for (let i = 2; i <= k; i++)
Left: j = k..1, Right: j = 2..k per row
Append j if j > i, else i to line
Skip i = 1 in bottom loop (center already printed)
Check Number.isFinite(k) after parseInt(prompt())

❌ Don’t

Call console.log() inside the inner cell loop
Forget the bottom half loop — pattern stops at center
Start bottom loop at i = 1 — duplicates center row
Ignore bad console input in user-facing demos
Skip the k = 3 dry-run before coding k = 5

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this concentric number diamond

Print the pattern the beginner-friendly way.

Core concepts

△ 01

Rule

Two outer loops

Definition

↻ 02

Top half

i = k..1

Code

↓ 03

Bottom half

i = 2..k

Code

↵ 04

Cell rule

j > i ? j : i

Logic

O 05

Grid

(2k-1)² cells

Analysis

❓ Frequently Asked Questions

What does Program 47 print?

A full concentric number diamond where the outer layer is k (e.g. 5), values decrease to 1 at the center, then increase back to k — a 9×9 grid when k = 5.

Why are there two outer loops?

The first prints the top half (i = k down to 1). The second prints the bottom half (i = 2 up to k) to mirror the shape.

How is this different from Program 46?

Program 46 prints only the top half (k rows). Program 47 adds the bottom half loop to form a complete diamond.

What does j > i mean?

When column j is still outside the current row layer i, append j (the outer number). Otherwise append i (the current row value).

How wide is the output?

For k, each row has 2*k - 1 numbers. With k = 5, width is 9 columns and 9 rows.

How can I change k?

Change the value of k or read it from prompt() — both outer loops and row width adjust automatically.

What is the time complexity?

O(k²) because the grid has roughly (2k-1)² cells and each is printed once.

What does the center cell print?

The center prints 1 — it is the deepest layer of the concentric pattern.

Can I print without spaces?

Yes — omit the trailing space in line += or use padStart for fixed-width columns when k is large.

How should I read k safely?

Use parseInt with Number.isFinite and validate k > 0 before printing.

Did you Know? 🔊

Print top half with for (let i = k; i >= 1; i--), then bottom half with for (let i = 2; i <= k; i++). Each cell: j > i ? j : i. Grid size = 2k - 1 rows and columns.

Continue to Program 48

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

Program 48 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 46 — Concentric Number Square JavaScript Number Pattern 48

Full Concentric Number Diamond in JavaScript

What You’ll Learn

Shape Rule

Top Outer Loop

Bottom Outer Loop

Cell Rule

Live Preview

O(k²)

Introduction

Why it matters?

Two outers

Left + right

vs Program 46

Series Foundation

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 Fixed k vs User Input vs Compact k=3

When This Pattern Shows Up

Post Program 46 exercise

Two outer loops

Layer / peel logic

Gateway to variants

Not a UI layout tool

🔮 Live Preview

Examples Gallery

📚 Getting Started

Example 1 — Fixed k = 5

How It Works

📈 User Input

Example 2 — User Input k

How It Works

⚡ Compact k = 3

Example 3 — Compact k = 3

How It Works

🧠 How the Algorithm Prints Rows

Set up

Print top half

Left half (j = k..1)

Mirror bottom half

New line per row

Concentric diamond complete

🔎 Worked Walkthrough — row i = 3, k = 5

Use Cases

1. Teaching Nested Loops

2. Pattern Series Base

3. Console Formatting Drills

4. Symmetry Practice

5. Complexity Intuition

6. Input Validation Labs

Advantages

1. Instant Visual Feedback

2. Minimal Concepts

3. Easy to Extend

4. O(1) Extra Memory

Usage Tips

1. Use the k Variable

2. Validate with Number.isFinite()

3. Keep Newline Outside

4. Two Inner Loops

5. Dry-Run k = 3

Common Pitfalls

1. Newline Inside the Inner Loop

2. Right Loop Starts at 2

3. Forgetting Bottom Half

4. k Too Small

5. Bare parseInt(prompt())

Edge Cases

Single cell

Empty pattern

k < 0

Minimal diamond

Non-numeric input

Large row count

🎯 Practice Problems

1. Concentric square

2. Change k

3. Next in series

Example 1 — Fixed `k = 5`

Example 3 — Compact `k = 3`

🔎 Worked Walkthrough — row `i = 3`, `k = 5`

2. Validate with `Number.isFinite()`

5. Bare `parseInt(prompt())`

`k < 0`