Right-Aligned Triangle Star Pattern in JavaScript

Beginner
⏱️ 8 min read
📚 Updated: Aug 2025
🎯 1 Code Example
spaces + stars per row
Right-aligned triangle star pattern output in JavaScript programming

What You'll Learn

This program prints a right-aligned triangle. Each row begins with some spaces so the stars line up to the right edge.

For row i (starting at 1), print rows - i spaces, then print i stars.

⭐ Pattern Output

When you run the program with rows = 5:

Output
    *
   **
  ***
 ****
*****
1

Complete JavaScript Program

Fixed rows = 5 version (nested loops):

JavaScript
const rows = 5;

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

🧠 How It Works

1

Outer loop over rows

for (let i = 1; i <= rows; i++) drives one output line per iteration. let line = ""; accumulates characters left to right.

Outer loop
2

Leading spaces

for (let s = 1; s <= rows - i; s++) line += " "; prints rows - i spaces so the star block sits against the right for a fixed total width rows per line.

Alignment
3

Stars and newline

for (let j = 1; j <= i; j++) line += "*"; adds i stars. console.log(line) prints the row. One-liner option: " ".repeat(rows - i) + "*".repeat(i).

Stars
=

Right-aligned triangle

O(n²) characters for n = rows, O(1) extra space. The green strip uses shared CSS so long lines scroll on touch devices.

💡 Tips for Enhancement

Try These

  • Use " ".repeat(rows - i) + "*".repeat(i) for clean code
  • Print spaces between stars using "* ".repeat(i).trimEnd()
  • Compare with Program 1 to understand alignment vs. shape
  • Try the inverted right-aligned triangle next (Program 4)
  • Try the shorter version using repeat() for both spaces and stars

Avoid

  • Printing trailing spaces after the stars (can look odd in monospace output)
  • Using tabs for alignment (rendering differs)
  • Mixing spaces and other characters for indentation
  • Printing extra spaces at the end of each line (harder to compare outputs)

Key Takeaways

1

Row i prints rows - i spaces and then i stars.

2

Leading spaces are what make the triangle right-aligned.

3

repeat() is a clean way to build each row.

4

Time complexity is O(n²) due to printing \(\Theta(n^2)\) characters.

5

This is the right-aligned variant of the basic triangle.

❓ Frequently Asked Questions

Because row 1 prints rows - 1 spaces so the single star sits at the right edge.
Yes. For each row i, print " ".repeat(rows - i) + "*".repeat(i).
It’s O(n²) for n rows, since printing spaces + stars across all rows is \(\Theta(n^2)\).

Next: Inverted Right-Aligned

Continue to Program 4 to print the inverted right-aligned triangle.

Program 4 →
Did you know?

Right-aligned patterns are a simple way to practice controlling leading spaces and understanding how alignment works in text output.

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)

9 people found this page helpful

JavaScript Star Pattern 2 JavaScript Star Pattern 4