Forward Alternating 1-0 Triangle in JavaScript

Beginner
⏱️ 5 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Nested Loops + Modulo
Forward alternating 1-0 triangle output (1, 10, 101, 1010, 10101) in JavaScript programming

What You’ll Learn

How to print a forward alternating 1-0 triangle in JavaScript where each row starts with 1 and alternates using modulo logic.

This is a clean example of combining nested loops with parity checks in a predictable row-wise pattern.

⭐ Pattern Output

For rows = 5, the pattern looks like this:

Output
1
10
101
1010
10101
1

Complete JavaScript Program

Outer loop increases row size, and inner loop prints j % 2 from left to right.

JavaScript
const rows = 5;

for (let i = 1; i <= rows; i++) {
  let line = "";
  for (let j = 1; j <= i; j++) {
    line += j % 2;
  }
  console.log(line);
}
Try it Yourself

🧠 How It Works

1

Set row count

const rows = 5; determines triangle height.

Setup
2

Outer loop (grow rows)

for (let i = 1; i <= rows; i++) increases row width one step at a time.

Row control
3

Inner loop + modulo

for (let j = 1; j <= i; j++) prints columns, and j % 2 alternates 1,0,1,0....

Binary pattern logic
4

Output each row

console.log(line); prints one completed row per iteration.

Line break
=

Forward alternating triangle

Forward column traversal makes every row start with 1, unlike the reverse-loop variation.

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 = 1; i <= rows; i++) {
  for (let j = 1; j <= i; j++) {
    document.write(j % 2);
  }
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Take rows as user input to scale the pattern
  • Use spaces between digits for visual clarity
  • Switch to reverse inner loop to compare with Program 15
  • Generate the same pattern using a toggle variable
  • Render output inside a <pre> via DOM methods

Avoid

  • Confusing loop direction between Program 15 and 16
  • Using incorrect modulo expression or wrong variable
  • Skipping checks for invalid row values
  • Using document.write in production interfaces

Key Takeaways

1

The outer loop controls row count and width growth.

2

The inner loop prints columns left to right from 1 to i.

3

j % 2 yields the repeating binary pattern values.

4

Loop direction alone can change the entire row-start behavior.

❓ Frequently Asked Questions

Because row 2 prints j = 1, 2 in order, so 1%2 = 1 then 2%2 = 0.
Reverse rows iterate j from i down to 1, so even rows may start with 0 instead.
Yes. Example 2 prints it in-browser using document.write.
O(n²), based on total printed digits across all rows.

Explore More JavaScript Number Patterns!

Practice modulo-based patterns to build stronger intuition for parity and loop structure.

All Number Patterns →
Did you know?

Modulo operations are widely used in cyclic UI patterns too, like alternating row colors and repeating schedules.

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 15 JavaScript Number Pattern 17