Mirror Number Pattern with Middle Spaces in JavaScript
What You’ll Learn
How to print a pattern that grows on both sides: the left side prints 1..i, the right side prints i..1, and the middle gap shrinks each row.
This is a useful pattern for practicing nested loops plus conditional spacing.
⭐ Pattern Output
For size = 5, the pattern looks like this:
1 1
12 21
123 321
1234 4321
1234554321Complete JavaScript Program
We print the left half from 1 to i, then spaces, then the right half from i down to 1. The conditions decide whether to print a number or a space.
const size = 5;
for (let i = 1; i <= size; i++) {
let line = "";
// Left half: 1..i, then spaces up to size
for (let j = 1; j <= size; j++) {
line += (j <= i) ? String(j) : " ";
}
// Right half: spaces until i, then i..1
for (let k = size; k >= 1; k--) {
line += (k > i) ? " " : String(k);
}
console.log(line.trimEnd());
}🧠 How It Works
Set the pattern size
const size = 5; controls both halves and the total width.
Outer loop prints 5 rows
for (let i = 1; i <= size; i++) increases the amount of numbers on each side.
Build the left half (1..i)
In the first inner loop, we print j only when j <= i; otherwise we add spaces to keep alignment.
Build the right half (i..1)
The second inner loop runs from size down to 1. Values greater than i become spaces; the rest print the digit.
Gap shrinks automatically
As i grows, fewer positions are spaces, so the two halves move closer together.
Variation — Browser (document.write) Version
Print the same pattern in an HTML page using document.write and for spacing:
<!DOCTYPE html>
<html>
<body>
<script>
var i, j, k;
for (i = 1; i <= 5; i++) {
for (j = 1; j <= 5; j++) {
if (j <= i)
document.write(j);
else
document.write(" ");
}
for (k = 5; k >= 1; k--) {
if (k > i)
document.write(" ");
else
document.write(k);
}
document.write("<br>");
}
</script>
</body>
</html>💡 Tips for Enhancement
Try These
- Make
sizedynamic and compute spacing based on it - Add spaces between digits when values become multi-digit
- Replace the gap spaces with symbols (like
*) for framed patterns - Center-align the entire line by adding leading spaces
Avoid
- Printing normal spaces in HTML instead of
(alignment can collapse) - Changing one half without adjusting the other (breaks symmetry)
- Forgetting to trim trailing spaces in console output
Key Takeaways
Two halves are printed using two loops: left ascending, right descending.
Conditional logic prints either a number or spacing for alignment.
The middle gap shrinks as i grows.
The final row has no gap, producing 1234554321.
❓ Frequently Asked Questions
i = size, both loops print all digits with no spaces, so the left prints 12345 and the right prints 54321.const size = n and use size in all loop bounds, including the right-side loop starting at size. spacing.Explore More JavaScript Number Patterns!
Mirror-style patterns are a great way to practice symmetry and spacing.
You can create many “butterfly” and “diamond” patterns by printing two mirrored halves separated by a computed gap—exactly the technique used here.
About the author
12 people found this page helpful