Symmetric Number Pattern Centered at 0 in JavaScript
What You’ll Learn
How to print a symmetric number pattern centered around 0 in JavaScript. Each row prints an increasing sequence up to 9, prints 0, then prints a decreasing sequence back.
This pattern is a great exercise for combining two inner loops that build the left and right halves.
⭐ Pattern Output
For this example, the pattern looks like this:
0
909
89098
7890987
678909876
56789098765
4567890987654
345678909876543
23456789098765432
1234567890987654321Complete JavaScript Program
The outer loop decreases the row start from 10 to 1. The left half prints i..9, then we print 0, then the right half prints 9..i.
for (let i = 10; i >= 1; i--) {
let line = "";
for (let j = i; j < 10; j++) {
line += j;
}
line += "0";
for (let k = 9; k >= i; k--) {
line += k;
}
console.log(line);
}🧠 How It Works
Outer loop chooses the row start
for (let i = 10; i >= 1; i--) controls how wide each row becomes as i gets smaller.
Left half prints i..9
for (let j = i; j < 10; j++) appends the increasing part. When i = 8, it prints 89.
Center value is always 0
line += "0"; inserts the center digit to keep the pattern symmetric.
Right half prints 9..i
for (let k = 9; k >= i; k--) mirrors the left half back down to the row start.
Row becomes symmetric
The left and right sides mirror around 0, forming the symmetric sequence.
Variation — Browser (document.write) Version
Print the pattern directly into an HTML page using document.write:
<!DOCTYPE html>
<html>
<body>
<script>
var i, j, k;
for (i = 10; i >= 1; i--) {
for (j = i; j < 10; j++)
document.write(j);
document.write("0");
for (k = 9; k >= i; k--)
document.write(k);
document.write("<br>");
}
</script>
</body>
</html>💡 Tips for Enhancement
Try These
- Make the max digit configurable (instead of hard-coding 9 and 10)
- Add spaces between digits when printing multi-digit values
- Change the center character from
0to another symbol (like*) - Skip the first row if you don’t want a single
0line
Avoid
- Changing one loop bound without updating the others (breaks symmetry)
- Using
j <= 10(prints an extra 10 in the left half) - Forgetting the line break in browser output
Key Takeaways
Two inner loops can build a symmetric row: left side up, right side down.
Printing a fixed center value (here 0) helps create symmetry.
The row start (i) controls the width of each line.
Careful loop bounds (< 10, >= i) prevent off-by-one errors.
❓ Frequently Asked Questions
i = 9, the left loop prints only 9, then we print 0, then the right loop prints 9 again, giving 909.j <= 10 would accidentally print 10." " after each digit and trim at the end, especially if you plan to print multi-digit values.i = 10 down to 1.Explore More JavaScript Number Patterns!
Symmetric patterns like this teach you how to mirror sequences and avoid off-by-one issues.
Mirroring patterns often come from two loops that run in opposite directions. Adding a single center value (like 0) makes it easy to keep both halves balanced.
About the author
12 people found this page helpful