0-Based Increasing Sum Triangle in JavaScript

Beginner
⏱️ 6 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
i + j formula (0-based)
0-based increasing sum triangle output (0, 1 2, 2 3 4, 3 4 5 6, 4 5 6 7 8, 5 6 7 8 9 10) in JavaScript programming

What You’ll Learn

How to print a triangle where each value is simply the sum of the row and column indices: i + j.

This is a clean introduction to 0-based loops and pattern printing in JavaScript.

⭐ Pattern Output

For maxRow = 5, the pattern looks like this:

Output
0
1 2
2 3 4
3 4 5 6
4 5 6 7 8
5 6 7 8 9 10
1

Complete JavaScript Program

The outer loop starts at 0. For each row i, the inner loop prints j from 0 to i and outputs i + j.

JavaScript
const maxRow = 5;

for (let i = 0; i <= maxRow; i++) {
  let line = "";
  for (let j = 0; j <= i; j++) {
    line += (i + j) + (j === i ? "" : " ");
  }
  console.log(line);
}
Try it Yourself

🧠 How It Works

1

Choose the maximum row

maxRow = 5 means we print rows from 0 to 5 (6 rows total).

Setup
2

Outer loop controls row index i

i starts at 0, so the first line contains a single value.

Rows
3

Inner loop runs from 0..i

That makes row i print i + 1 numbers.

Columns
4

Print i + j

The expression i + j increases by 1 as j increases across the row.

Math
=

Row is a shifted range

Row 4 starts at 4 and ends at 8 because it prints 4+0 through 4+4.

2

Variation — Browser (document.write) Version

Print the triangle in an HTML page using document.write:

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

💡 Tips for Enhancement

Try These

  • Change the start index to 1 to match 1-based triangles
  • Add an offset: print (base + i + j) to shift all values
  • Pad numbers for alignment when values become two digits
  • Reverse the triangle by looping i downward

Avoid

  • Mixing 0-based and 1-based bounds (causes off-by-one issues)
  • Printing without separators (multi-digit numbers can merge)
  • Forgetting line breaks in browser output

Key Takeaways

1

Using 0-based loops changes the first row output to 0.

2

Row i prints values from i up to 2i using i + j.

3

Inner loop bound j <= i controls the triangle growth.

4

This pattern is a foundation for many arithmetic-based triangles.

❓ Frequently Asked Questions

Row 5 prints until j = 5, so the last value is 5 + 5 = 10.
Yes. Start i at 1 and start j at 1, then print i + j - 1.
Spaces improve readability, especially once values become two digits (like 10).
Yes. In a grid, all points with the same sum i + j lie on the same diagonal, which is why sum-based patterns look “shifted”.

Explore More JavaScript Number Patterns!

Try changing formulas to see how patterns transform with small math tweaks.

All Number Patterns →
Did you know?

Printing i + j is one of the simplest ways to generate arithmetic patterns—yet it connects to diagonals, sums, and even dynamic programming tables.

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 33 JavaScript Number Pattern 35