Decreasing Number + Asterisks Pattern in JavaScript
What You’ll Learn
How to build a pattern by combining multiple loops: an ascending digit section, an expanding middle of **, and a descending digit section.
You’ll practice loop control with a decreasing outer counter and repeated output with document.write or console.log.
⭐ Pattern Output
For size = 5, the pattern looks like this:
1234554321
1234**4321
123****321
12******21
1********1Complete JavaScript Program
Outer loop decreases i. Left digits go from 1..i. Middle prints \"**\" blocks. Right digits go from i..1.
const size = 5;
for (let i = size; i >= 1; i--) {
let line = "";
// Left digits: 1..i (concatenated)
for (let j = 1; j <= i; j++) {
line += j;
}
// Middle asterisks: (size - i) times "**"
for (let k = i; k < size; k++) {
line += "**";
}
// Right digits: i..1 (concatenated)
for (let m = i; m >= 1; m--) {
line += m;
}
console.log(line);
}🧠 How It Works
Choose the pattern size
const size = 5; sets how many rows appear and controls the number of \"**\" blocks.
Outer loop counts down
for (let i = size; i >= 1; i--) decreases the digits each row, while the stars grow.
Print left digits
The loop for (let j = 1; j <= i; j++) concatenates digits from 1 to i.
Expand middle stars + right digits
for (let k = i; k < size; k++) appends \"**\", then for (let m = i; m >= 1; m--) appends the right digits.
Row is assembled in parts
Digits are concatenated with a star-block that increases as i goes down.
Variation — Browser (document.write) Version
Print the pattern directly into an HTML page using document.write:
<!DOCTYPE html>
<html>
<body>
<script>
var size = 5;
for (var i = size; i >= 1; i--) {
for (var j = 1; j <= i; j++)
document.write(j);
for (var k = i; k < size; k++)
document.write("**");
for (var m = i; m >= 1; m--)
document.write(m);
document.write("<br>");
}
</script>
</body>
</html>💡 Tips for Enhancement
Try These
- Increase
sizeto see a bigger pattern - Change the middle block from
\"**\"to another character - Add spaces between digits for improved readability
- Swap the order (print right side first) to explore variations
Avoid
- Using
k <= sizeinstead ofk < size(too many stars) - Forgetting to add
<br>after each row in browser mode - Building the line in the wrong loop scope (missing concatenation)
- Printing spaces inside the middle stars loop (breaks the intended block look)
Key Takeaways
Using a decreasing outer loop makes the digit parts shrink each row.
The middle section grows by printing \"**\" for each remaining step.
Concatenation is the core technique: digits are appended into one string.
You can swap output methods: console.log vs document.write.
❓ Frequently Asked Questions
i = size, the middle loop for (k = i; k < size; k++) doesn’t run (there are zero remaining steps).i = 1, the middle loop runs size - 1 times. For size = 5 that is 4 blocks, producing ********.j and m ranges), but keep the star loop condition the same so the middle expansion stays correct.Explore More JavaScript Number Patterns!
Use decreasing loops and middle placeholders to create framed and diamond-style patterns.
Patterns like this are useful for practicing index math: when you decrease i, the “gap” between two ranges grows automatically.
About the author
12 people found this page helpful