JavaScript Concentric Number Square Pattern

Beginner

5 min read

Updated: Sep 2026

3 programs

Live preview

Concentric number square pattern in JavaScript (5 5 5…5 down to 5 4 3 2 1 2 3 4 5)

Definition

What Is This Pattern?

A concentric number square prints layers from k down to 1: outer values stay large, the center is 1, and each row mirrors left-to-right.

Remember

Rule: append (j > i ? j : i); left k..1, right 2..k

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   ← k = 5

Unlike Program 45 (star/zero X), this pattern builds number layers — grid size is k rows by 2k - 1 columns.

Approach

How to Solve It

One outer layer loop (i = k..1), then left and right halves with the same cell rule. End each row with console.log.

Method	Idea	Best for
Two-half row	Left `k..1`, right `2..k`, value `j > i ? j : i`	Classic concentric demos
Compact	Same logic with a smaller `k` (e.g. 3)	Quick dry-runs

Pseudocode

for i from k down to 1:
    line = ""
    for j from k down to 1:
        append (j if j > i else i) and a space
    for j from 2 to k:
        append (j if j > i else i) and a space
    print line

Cheat sheet

Goal	Pattern
Layer loop	`for (let i = k; i >= 1; i--)`
Left half	`for (let j = k; j >= 1; j--)`
Right half	`for (let j = 2; j <= k; j++)`
Cell value	`line += (j > i ? j : i) + " ";`
End the row	`console.log(line);`
Grid size	`k` rows × `2*k - 1` columns

Printing Numbers vs Starting a New Line

API	Effect	Use for
`line += …`	Stays on the same row	Each cell value + space
`console.log(line)`	Ends the current row	After both halves finish

Append without a newline, then end the row once.

Try it

Live Preview

Change k and the concentric square updates instantly.

Trace

Worked Walkthrough

Trace three rows when k = 3 — watch left half, right half, and the j > i rule.

Row `i`	Left (`j=3..1`)	Right (`j=2..3`)	Printed row
3	`3 3 3`	`3 3`	`3 3 3 3 3`
2	`3 2 2`	`2 3`	`3 2 2 2 3`
1	`3 2 1`	`2 3`	`3 2 1 2 3`

Rows = k, columns = 2k - 1. Total cells for k = 5 = 5 × 9 = 45.

Code

JavaScript Programs

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

Example 1 — Fixed `k = 5`

Hard-coded peak — left k..1, right 2..k, value j > i ? j : i.

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);
}

Try It Yourself

How It Works

1. Walk layers downward. Outer loop i runs from k down to 1 — one row per layer.

2. Build the left half. j runs k..1; append j when j > i, else i.

3. Mirror the right. Second inner loop starts at 2 so the center digit is not printed twice.

Example 2 — User Input `k`

Read the peak with prompt and validate before drawing.

JavaScript

const k = parseInt(prompt("Enter k (peak number):"), 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);
  }
}

Try It Yourself

How It Works

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

2. Same square core. Only the source of k changes — both halves match Example 1.

3. Entering 3. Three rows, five columns (2*3 - 1), center is 1.

Example 3 — Compact `k = 3`

Same two-half logic with a smaller peak for a quick visual check.

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);
}

Try It Yourself

How It Works

1. Shrink the peak. Only k changes — still left k..1 and right 2..k.

2. Easier to trace. Three rows instead of five — useful while learning j > i.

3. Same center rule. Bottom row still ends with … 1 … in the middle.

Edge Cases & Pitfalls

Check these before calling the solution done.

Right start

Start the right half at j = 2

Starting at 1 duplicates the center digit and breaks the width formula.

j > i

Do not swap the ternary

j > i ? j : i keeps outer rings larger. Reversing it collapses the layers.

k = 1

Single-layer case

Output is just 1 — the right half loop never runs.

Bad input

Validate parseInt

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

Analysis

Time and Space Complexity

Program	Time	Extra space
Fixed / compact (Examples 1, 3)	`O(k²)`	`O(k)` per row string
User input (Example 2)	`O(k²)`	`O(k)` per row string

There are k rows and 2k - 1 cells per row, so total work is quadratic in k.

Remember

Key Takeaways

Rule: append j > i ? j : i on each half of the row.
Shape: left k..1, right 2..k; width = 2k - 1.
Break the row: call console.log(line) only after both halves finish.
Complexity: O(k²) time — k rows × ~2k cells.

One line: for each layer i, append left then right halves with j > i ? j : i, then log the row.

Frequently Asked Questions

What does this pattern print?

A concentric number square: the outer layer is k (e.g. 5), values decrease toward the center to 1, then mirror back out on each row.

Why is the output symmetric?

Each row appends a left half (j = k..1) and a right half (j = 2..k) with the same j > i rule, mirroring around the center.

What does j > i mean?

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

Why two inner loops per row?

The first builds the left descending half; the second mirrors columns 2..k on the right without repeating the center digit.

What is the difference between line += and console.log?

line += appends on the same row. console.log(line) ends the row after both halves finish.

How is this different from Program 45?

Program 45 prints a star-and-zero X on a fixed grid. Program 46 prints decreasing/increasing numbers in a concentric square.

What is the time complexity?

O(k²) because each of k rows appends about 2k - 1 cells.

What is the grid width?

Each row has 2*k - 1 numbers. For k = 5, width is 9 columns.

Did you know?

Each cell appends j when j > i, else i. Row i runs from k down to 1; grid width = 2k - 1 columns per row.

Next: Full Concentric Number Square

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

Program 47 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 45 — X Pattern with Stars and Zeros JavaScript Number Pattern 47 — Full Concentric Number Square

JavaScript Concentric Number Square Pattern

What Is This Pattern?

How to Solve It

Pseudocode

Cheat sheet

Printing Numbers vs Starting a New Line

Live Preview

Worked Walkthrough

JavaScript Programs

Example 1 — Fixed k = 5

How It Works

Example 2 — User Input k

How It Works

Example 3 — Compact k = 3

How It Works

Edge Cases & Pitfalls

Time and Space Complexity

Key Takeaways

Frequently Asked Questions

Did you know?

Related Topics

Program 45

Program 47

Java Version

Number Patterns Hub

Next: Full Concentric Number Square

About the author

Example 1 — Fixed `k = 5`

Example 2 — User Input `k`

Example 3 — Compact `k = 3`