Centered Number Diamond (1..2i-1) in JavaScript
What You’ll Learn
How to print a centered number diamond in JavaScript. The top half grows by odd counts (1, 3, 5…) and the bottom half mirrors it back down.
You’ll practice nested loops, indentation for centering, and building symmetric output.
⭐ Pattern Output
For size = 5, the pattern looks like this:
1
123
12345
1234567
123456789
1234567
12345
123
1Complete JavaScript Program
We build each row as a string: first indentation spaces, then digits from 1 to 2*i - 1. We print the top half and then the mirrored bottom half.
const size = 5;
// Top half (including middle)
for (let i = 1; i <= size; i++) {
let line = " ".repeat(size - i);
for (let k = 1; k <= 2 * i - 1; k++) {
line += k;
}
console.log(line);
}
// Bottom half
for (let i = size - 1; i >= 1; i--) {
let line = " ".repeat(size - i);
for (let k = 1; k <= 2 * i - 1; k++) {
line += k;
}
console.log(line);
}🧠 How It Works
Choose size
const size = 5; controls the diamond height (top half has 5 rows).
Top half loop (i = 1..size)
Each row i prints 2*i - 1 digits and is centered using size - i spaces.
Bottom half loop (i = size-1..1)
We repeat the same logic in reverse to mirror the top half and complete the diamond.
Digits per row
The inner loop prints digits 1..(2*i - 1), which produces the odd-length rows: 1, 3, 5…
Centered number diamond
Top + bottom symmetry produces the diamond shape with a single rule for spaces and digit count.
Variation — Browser (document.write) Version
This variation uses document.write and so the pattern aligns correctly in HTML output.
<!DOCTYPE html>
<html>
<body>
<script>
var i, j, k;
var size = 5;
// Top half (including middle)
for (i = 1; i <= size; i++) {
for (j = i; j < size; j++)
document.write(" ");
for (k = 1; k < i * 2; k++)
document.write(k);
document.write("<br>");
}
// Bottom half
for (i = size - 1; i >= 1; i--) {
for (j = size; j > i; j--)
document.write(" ");
for (k = 1; k < i * 2; k++)
document.write(k);
document.write("<br>");
}
</script>
</body>
</html>💡 Tips for Enhancement
Try These
- Change
sizeto print a taller (or smaller) diamond - Add spaces between digits (print
k + " ") for readability - Print in reverse order to create
9..1diamonds - Replace digits with characters to create an alphabet diamond
Avoid
- Using normal spaces in HTML (they collapse); use
- Forgetting the mirrored bottom half (you’ll only get a pyramid)
- Mixing up
2*i - 1with2*i(row widths will be off by one)
Key Takeaways
A centered diamond is a pyramid + a mirrored pyramid.
Indentation is size - i spaces for each row.
Each row prints 2*i - 1 digits to create odd widths.
Use when printing aligned patterns in the browser.
❓ Frequently Asked Questions
2*i - 1 digits ensures there’s a single center digit and symmetric growth.line += k + " "; and adjust indentation (use two spaces per step) to keep alignment.size. The widest row will have 2*size - 1 digits.String(k).padStart(2)) and use matching indentation so columns align.Explore More JavaScript Number Patterns!
Diamonds are a great milestone. Next, try combining indentation with multiple sequences to create even richer patterns.
Diamonds and pyramids often share the same core formula: leading spaces + an odd-length row. Once you master 2*i - 1, you can build many symmetric patterns quickly.
About the author
12 people found this page helpful