Repeating Number Pattern (Decreasing Length) in JavaScript

Beginner
⏱️ 5 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Decreasing columns + mirrored values

What You’ll Learn

How to print a repeating number pattern where each row repeats the same digit, and the row length decreases from 5 down to 1.

You’ll also learn a simple mirroring trick so the last rows print 22 and 1 instead of 4444 and 55555.

⭐ Pattern Output

For rows = 5, the pattern looks like this:

Output
11111
2222
333
22
1
1

Complete JavaScript Program

The inner loop prints rows - i + 1 characters on each row. The value is i for the first three rows, then mirrored using rows + 1 - i.

JavaScript
const rows = 5;

for (let i = 1; i <= rows; i++) {
  const count = rows - i + 1;
  const value = i < 4 ? i : (rows + 1 - i);
  console.log(String(value).repeat(count));
}

🧠 How It Works

1

Choose the row count

const rows = 5; sets the height and the maximum row length.

Setup
2

Outer loop controls rows

for (let i = 1; i <= rows; i++) runs once per line of output.

Row control
3

Compute how many times to print

count = rows - i + 1 decreases by 1 each row, producing lengths 5, 4, 3, 2, 1.

Length
4

Pick the digit value (mirror)

For i < 4, use i. Otherwise use rows + 1 - i to mirror back down.

Value
=

Row is generated by repetition

String(value).repeat(count) builds each output line in one step.

2

Variation — Browser (document.write) Version

Print the same pattern directly into an HTML page:

HTML
<!DOCTYPE html>
<html>
<body>
<script>
var rows = 5;
for (var i = 1; i <= rows; i++) {
  for (var j = i; j <= rows; j++) {
    if (i < 4)
      document.write(i);
    else
      document.write(rows + 1 - i);
  }
  document.write("<br>");
}
</script>
</body>
</html>

💡 Tips for Enhancement

Try These

  • Change rows to generate a bigger or smaller pattern
  • Replace the digit with another value (like rows - i + 1) to explore different sequences
  • Add a space between digits (useful when values become 2-digit numbers)
  • Build the line using an inner loop instead of repeat for more control

Avoid

  • Hard-coding i < 4 if you later change the number of rows; adjust the mirror point accordingly
  • Forgetting the line break in browser mode
  • Mixing row and column counters (keep i for rows, j for columns)

Key Takeaways

1

Row length is controlled by decreasing columns: rows - i + 1.

2

The printed digit can be mirrored using rows + 1 - i.

3

repeat is a simple way to generate repeated characters quickly.

4

The same idea can be used to print letter or symbol patterns.

❓ Frequently Asked Questions

Because the last two rows use a mirrored value (rows + 1 - i) so the digits step back down as the row length shrinks.
Yes. Instead of repeat, build the line with a loop and append " " after each digit.
Use a middle threshold like Math.ceil(rows / 2) + 1 depending on the pattern you want, then mirror after that threshold.
Yes. The browser version uses nested loops directly, and the console version compresses the inner loop into repeat for simplicity.

Explore More JavaScript Number Patterns!

Keep practicing loops by mixing repetition, mirroring, and spacing techniques.

All Number Patterns →
Did you know?

Many pattern problems can be reduced to two choices: (1) how many characters to print, and (2) what value to print. Once you compute both, printing becomes straightforward.

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

12 people found this page helpful