Alternating 0-1 Triangle in JavaScript

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

What You’ll Learn

How to print an alternating 0-1 triangle in JavaScript using nested loops and modulo arithmetic.

This pattern helps you understand how parity (% 2) can be used to generate binary-like sequences.

⭐ Pattern Output

For rows = 5, the pattern looks like this:

Output
1
01
101
0101
10101
1

Complete JavaScript Program

Outer loop grows row size. Inner loop moves backward and prints j % 2, creating alternating 0/1 digits.

JavaScript
const rows = 5;

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

🧠 How It Works

1

Set number of rows

const rows = 5; controls triangle height.

Setup
2

Outer loop grows row width

for (let i = 1; i <= rows; i++) increases row length from 1 to 5.

Row control
3

Inner loop + modulo

for (let j = i; j >= 1; j--) runs backward, and j % 2 outputs alternating bits.

Binary pattern logic
4

Print each row

console.log(line); outputs one generated row per iteration.

Line break
=

Alternating 0-1 triangle

Modulo arithmetic provides a compact way to convert counting loops into alternating digit patterns.

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

💡 Tips for Enhancement

Try These

  • Use user input to set dynamic row count
  • Start inner loop from 1 for a mirrored bit pattern
  • Replace 0/1 with symbols like * and -
  • Store rows in an array and render them into the DOM
  • Add spacing between bits for easier visual parsing

Avoid

  • Using wrong loop direction when you expect `01` or `10` starts
  • Mixing row index and column index parity accidentally
  • Skipping validation for negative row values
  • Using document.write in production frontends

Key Takeaways

1

The outer loop controls triangle height and row width.

2

The inner loop builds each row by iterating backward.

3

j % 2 is the core trick for alternating 0 and 1 values.

4

Small loop-direction changes create different binary-style patterns.

❓ Frequently Asked Questions

Because the row loops from j = i down to 1, so for i = 2, values are 2 then 1, producing 0 then 1.
Use a row-local toggle variable initialized to 1 and flip it each column.
Yes. Example 2 uses document.write to render directly in an HTML page.
O(n²), because total printed digits are proportional to triangular numbers.

Explore More JavaScript Number Patterns!

Use loop direction and modulo together to create richer, logic-driven pattern outputs.

All Number Patterns →
Did you know?

Many binary pattern problems can be solved with just one expression: value % 2. It is one of the simplest parity tools in programming.

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