Left-Decreasing Right-Fixed Number Pattern in JavaScript

Beginner
⏱️ 5 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Nested Loops
Left-decreasing right-fixed number output (5 5 5 5 5, 4 5 5 5 5, 3 4 5 5 5, 2 3 4 5 5, 1 2 3 4 5) in JavaScript programming

What You’ll Learn

How to print a two-part row pattern where the left side changes by row and the right side stays filled with a fixed number.

This pattern is useful for practicing multi-loop row composition in JavaScript.

⭐ Pattern Output

For rows = 5, the pattern looks like this:

Output
5 5 5 5 5
4 5 5 5 5
3 4 5 5 5
2 3 4 5 5
1 2 3 4 5
1

Complete JavaScript Program

First inner loop prints an increasing segment from i to 5. Second loop pads remaining columns with 5.

JavaScript
const rows = 5;

for (let i = rows; i >= 1; i--) {
  let line = "";

  for (let j = i; j <= rows; j++) {
    line += j + " ";
  }
  for (let j = 1; j < i; j++) {
    line += rows + " ";
  }

  console.log(line.trimEnd());
}
Try it Yourself

🧠 How It Works

1

Set total rows

const rows = 5; defines width and height.

Setup
2

Outer loop (descending i)

for (let i = rows; i >= 1; i--) determines row start value.

Row control
3

Print left segment (i..rows)

The first inner loop appends increasing values from current i up to rows.

Variable part
4

Pad right segment with fixed 5

The second loop appends repeated rows values to fill remaining width.

Fixed part
=

Split-row number composition

Combining two inner loops lets you build rows from multiple logical parts with independent rules.

2

Variation — Browser (document.write) Version

Print the same pattern directly in an HTML page using document.write:

HTML
<!DOCTYPE html>
<html>
<body>
<script>
for (let i = 5; i >= 1; i--) {
  for (let j = i; j <= 5; j++) {
    document.write(j + " ");
  }
  for (let j = 1; j < i; j++) {
    document.write("5 ");
  }
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Replace fixed tail value 5 with any constant
  • Use dynamic rows input for scalable patterns
  • Align columns using padding for table-like output
  • Convert the pattern to descending left segment variation
  • Render in DOM with <pre> for clean spacing

Avoid

  • Mixing loop bounds and breaking row width consistency
  • Forgetting the second loop that pads with fixed value
  • Skipping trim/spacing cleanup in console output
  • Using document.write in production pages

Key Takeaways

1

One loop can create the changing left side (i..5).

2

A second loop can fill the fixed right side with repeated values.

3

Descending outer loop naturally shifts row starts from 5 down to 1.

4

Split-loop rows are useful for matrix-like pattern design.

❓ Frequently Asked Questions

When i = 5, first loop prints only 5, and second loop adds four more 5s.
For i = 1, first loop prints full sequence to 5, and second loop runs zero times.
Yes. Example 2 uses document.write to display the same pattern in HTML.
O(n²) due to nested row and column style loops.

Explore More JavaScript Number Patterns!

Learn to combine multiple loops per row to create structured and layered pattern outputs.

All Number Patterns →
Did you know?

Many interview-style pattern problems are solved by splitting each row into segments and handling each segment with its own loop.

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.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Number Pattern 18 JavaScript Number Pattern 20