Centered Palindromic Number Pyramid in JavaScript

Beginner
⏱️ 7 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Centering + palindrome
Centered palindromic number pyramid output in JavaScript programming

What You’ll Learn

How to print a centered pyramid where each row is a palindrome: 1, then 1 2 1, then 1 2 3 2 1, and so on.

This pattern is perfect practice for nested loops, spacing, and symmetric output.

⭐ Pattern Output

For rows = 5, the pattern looks like this:

Output
        1
      1 2 1
    1 2 3 2 1
  1 2 3 4 3 2 1
1 2 3 4 5 4 3 2 1
1

Complete JavaScript Program

For each row i, we print indentation spaces, then numbers 1..i, then numbers i-1..1.

JavaScript
const rows = 5;

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

  // 2 spaces per indentation step
  line += "  ".repeat(rows - i);

  for (let k = 1; k <= i; k++) {
    line += k + " ";
  }
  for (let k = i - 1; k >= 1; k--) {
    line += k + " ";
  }

  console.log(line.trimEnd());
}
Try it Yourself

🧠 How It Works

1

Set the row count

rows = 5 controls the pyramid height.

Setup
2

Indentation spaces

" ".repeat(rows - i) adds fewer spaces as i increases, centering the pyramid.

Centering
3

Print ascending numbers

The first loop prints 1..i with spaces.

Up
4

Print descending numbers

The second loop prints i-1..1 to complete the palindrome.

Down
=

Palindromic row

A row is symmetric around the middle because we go up then back down.

2

Variation — Browser (document.write) Version

In HTML, use &nbsp; for spaces so the pyramid stays centered:

HTML
<!DOCTYPE html>
<html>
<body>
<script>
var rows = 5;
for (var i = 1; i <= rows; i++) {
  for (var j = rows; j >= i; j--) document.write("&nbsp;&nbsp;");
  for (var k = 1; k <= i; k++) document.write(k + "&nbsp;");
  for (var m = i - 1; m >= 1; m--) document.write(m + "&nbsp;");
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Increase rows to make the pyramid taller
  • Print without spaces to create a compact look (e.g., 12321)
  • Use fixed-width formatting for multi-digit values (like padStart)
  • Mirror the pyramid vertically to form a full diamond

Avoid

  • Using normal spaces in HTML (they collapse); use &nbsp;
  • Forgetting to trim trailing spaces in console output
  • Printing i again in the descending loop (start from i-1)

Key Takeaways

1

Each row is a palindrome: 1..i..1.

2

Indentation spaces are rows - i steps for centering.

3

Total values printed up to row n is n^2.

4

Use &nbsp; to preserve spacing in browser output.

❓ Frequently Asked Questions

We print 1..i in the first loop, and then start the second loop from i-1 so the peak value isn’t repeated.
Yes—after the top half, print rows from rows-1 back to 1 using the same row logic.
Concatenate digits without " ". For example, use line += k; instead of line += k + " ";.
Start your loops at 0 and adjust ranges accordingly (0..i..0). For beginners, 1-based is simpler.

Explore More JavaScript Number Patterns!

Next, try printing the same pyramid as a full diamond by adding a mirrored bottom half.

All Number Patterns →
Did you know?

Palindromic rows show up in many problems (numbers, strings, and arrays). Building a row up then down is a common technique.

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 55 JavaScript Number Pattern 57