Mirrored Diagonal Diamond Pattern
What You’ll Learn
How to print a diamond where the row number appears on two diagonals. The top half grows down to 5, then the bottom half mirrors back to 1.
Spacing matters here, so we use monospace output (or in HTML).
⭐ Pattern Output
For n = 5, the pattern looks like this:
1 1
2 2
3 3
4 4
5
4 4
3 3
2 2
1 1Complete JavaScript Program
We reuse the same diagonal logic for the top half (1..n) and the bottom half (n-1..1). Each row prints its row value at the two diagonal columns.
const n = 5;
const width = 2 * n - 1;
function printRow(i) {
let line = "";
for (let col = 1; col <= width; col++) {
const leftDiag = col === i;
const rightDiag = col === width - i + 1;
line += leftDiag || rightDiag ? String(i) : " ";
}
console.log(line.trimEnd());
}
// Top half
for (let i = 1; i <= n; i++) printRow(i);
// Bottom half
for (let i = n - 1; i >= 1; i--) printRow(i);🧠 How It Works
Set n and width
width = 2*n - 1 creates a symmetric row canvas.
Diagonal columns
We print at col === i and col === width - i + 1.
Top half (1..n)
Rows increase from 1 to n to reach the middle of the diamond.
Bottom half (n-1..1)
Rows then decrease back to 1 to mirror the top half.
Diamond shape
Same row rule + mirrored rows creates the full diamond.
Variation — Browser (document.write) Version
Use to preserve spacing and print the top + bottom halves:
<!DOCTYPE html>
<html>
<body>
<script>
var n = 5;
var width = 2 * n - 1;
function printRow(i) {
for (var col = 1; col <= width; col++) {
if (col === i || col === width - i + 1) document.write(i);
else document.write(" ");
}
document.write("<br>");
}
for (var i = 1; i <= n; i++) printRow(i);
for (var i2 = n - 1; i2 >= 1; i2--) printRow(i2);
</script>
</body>
</html>💡 Tips for Enhancement
Try These
- Increase
nto print a larger diamond - Replace numbers with
*for a classic X diamond - Pad multi-digit numbers to keep alignment when
n > 9 - Print borders as well (top/bottom lines) to create frames
Avoid
- Using normal spaces in HTML (alignment will break)
- Forgetting the bottom half loop (you’ll only get a V shape)
- Leaving trailing spaces if you compare output as strings
Key Takeaways
Diamond height is 2n - 1 (top + mirrored bottom).
Row width is 2n - 1 for symmetry.
Two diagonal rules place the numbers in the correct columns.
Use for browser output alignment.
❓ Frequently Asked Questions
String(i).padStart(2)) and increase spacing accordingly.Explore More JavaScript Number Patterns!
Once you master diagonal rules, try adding borders and center columns to create richer diamond patterns.
Most diamond patterns are just a top half plus a mirrored bottom half. Once you can mirror loops, many patterns become easy.
About the author
12 people found this page helpful