Alternating Ascending/Descending Number Triangle in JavaScript

Beginner
⏱️ 5 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Nested Loops + Condition
Alternating number triangle output (12345, 4321, 123, 21, 1) in JavaScript programming

What You’ll Learn

How to print an alternating direction number triangle where odd rows go ascending and even rows go descending.

This pattern combines loop control with if conditions based on odd/even row values.

⭐ Pattern Output

For rows = 5, the pattern looks like this:

Output
12345
4321
123
21
1
1

Complete JavaScript Program

Outer loop goes from rows down to 1. Even rows print descending order; odd rows print ascending order.

JavaScript
const rows = 5;

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

  if (i % 2 === 0) {
    for (let j = i; j >= 1; j--) {
      line += j;
    }
  } else {
    for (let j = 1; j <= i; j++) {
      line += j;
    }
  }

  console.log(line);
}
Try it Yourself

🧠 How It Works

1

Set row count

const rows = 5; defines the first row length and number of rows.

Setup
2

Outer loop (descending rows)

for (let i = rows; i >= 1; i--) controls row length from 5 down to 1.

Row control
3

Parity check decides direction

if (i % 2 === 0) chooses descending loop (i..1) for even rows; odd rows use ascending loop (1..i).

Condition logic
4

Print each generated row

console.log(line); outputs the row and moves to the next line.

Line break
=

Alternating number triangle

Direction flips row by row based on parity, while total printed digits still follow triangular growth (O(n²)).

2

Variation — Browser (document.write) Version

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

HTML
<!DOCTYPE html>
<html>
<body>
<script>
const rows = 5;

for (let i = rows; i >= 1; i--) {
  if (i % 2 === 0) {
    for (let j = i; j >= 1; j--) {
      document.write(j);
    }
  } else {
    for (let j = 1; j <= i; j++) {
      document.write(j);
    }
  }
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Let users choose row count and starting direction
  • Swap odd/even rules to create a mirrored variation
  • Add spaces between numbers for cleaner readability
  • Use arrays and join("") to build each row more flexibly
  • Render output in a <pre> element via DOM APIs

Avoid

  • Forgetting the odd/even condition before printing each row
  • Mixing row length logic between outer and inner loops
  • Using invalid inputs without validating row count
  • Using document.write in production interfaces

Key Takeaways

1

The outer loop sets the row length from rows down to 1.

2

An odd/even condition switches print direction for each row.

3

Even rows print descending, odd rows print ascending in this version.

4

Conditional nested loops can create rich mixed-direction patterns.

❓ Frequently Asked Questions

Because i = 4 is even, so the descending loop runs from 4 down to 1.
Swap the loop blocks in the if and else sections.
Yes, the second example uses document.write to render row by row in HTML.
O(n²), because total output across rows is proportional to triangular numbers.

Explore More JavaScript Number Patterns!

Practice conditional patterns to improve your nested-loop and branching skills together.

All Number Patterns →
Did you know?

Alternating direction patterns are a great way to combine two core topics: loops and conditionals. A single if can completely change row behavior.

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 12 JavaScript Number Pattern 14