Right-Aligned Right-Angled Triangle Star Pattern in JavaScript
Beginner
7 min read
Updated: Sep 2026
3 programs
Live preview
Definition
What Is This Pattern?
A right-aligned right-angled triangle keeps the same star counts as Program 1, but adds leading spaces so the right edge stays flush: row i prints rows - i spaces, then i stars.
Remember
Rule: on row i, print (rows - i) spaces, then i stars
* ← 4 spaces + 1 star
**
***
****
***** ← 0 spaces + 5 stars (5 rows)
In JavaScript you use one outer loop for the row and two inner loops that append to a line string, then console.log(line) to move down. Every line is exactly rows characters wide. That space loop is the usual step toward centered pyramids.
Approach
How to Solve It
Two ways to emit the same shape — start with nested loops, then optionally shorten with String.repeat.
Method
Idea
Best for
Two inner loops
Append spaces, then stars, then console.log
Learning, interviews, exams
String.repeat
Build padding and stars as strings
Shorter demos once formulas click
Pseudocode
Pseudocode
for i from 1 to rows:
line = ""
for j from 1 to (rows - i):
line += " "
for k from 1 to i:
line += "*"
print line
Change the row count and the right-aligned triangle updates instantly — including star total and line width.
Whole numbers from 1 to 20. Tap a chip or type a value — each line is that many characters wide.
Live result5 rows · 15 stars · width 5
*
**
***
****
*****
Trace
Worked Walkthrough — rows = 4
Trace spaces, stars, and total width for each outer-loop value of i.
i
Spaces rows - i
Stars
Width
Printed row
1
3
1
4
*
2
2
2
4
**
3
1
3
4
***
4
0
4
4
****
Every row has width 4. Star total: 1 + 2 + 3 + 4 = 10 = 4×5/2. Character prints are still O(n²).
Code
JavaScript Programs
Three complete programs: fixed rows, prompt input, and a String.repeat shortcut. Use View Output to reveal sample results.
Example 1 — Fixed rows = 5
Hard-coded height — space loop first, then star loop.
JavaScript
let rows = 5;
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = 1; j <= rows - i; j++) {
line += " ";
}
for (let k = 1; k <= i; k++) {
line += "*";
}
console.log(line);
}
Output
*
**
***
****
*****
How It Works
1. Set height.rows = 5 means five lines, each five characters wide.
2. Outer loop picks the row.i runs from 1 to rows. Start a fresh line = "" each time.
3. First inner loop appends spaces.j runs from 1 to rows - i, so row i gets rows - i leading spaces.
4. Second inner loop appends stars.k runs from 1 to i — same star counts as Program 1.
5. Print the row.console.log(line) after both inner loops starts the next row.
When i = 1 you get 4 spaces and *; when i = 5 you get 0 spaces and five stars.
Example 2 — User Input Version
Read the row count at runtime with prompt. Prefer validating with Number.isFinite (shown in the tip below).
JavaScript
let rows = parseInt(prompt("Enter the number of rows:"), 10);
for (let i = 1; i <= rows; i++) {
let line = "";
for (let j = 1; j <= rows - i; j++) {
line += " ";
}
for (let k = 1; k <= i; k++) {
line += "*";
}
console.log(line);
}
Output (when user enters 4)
*
**
***
****
How It Works
1. Prompt and parse. Ask for a row count, then convert with parseInt(..., 10).
2. Same space/star core. Only the source of rows changes — the print logic matches Example 1.
3. Safer input tip. Bare parseInt yields NaN on letters or Cancel. Prefer:
Safer input
let rows = parseInt(prompt("Enter the number of rows:"), 10);
if (!Number.isFinite(rows) || rows < 1) {
console.log("Enter a positive whole number.");
} else {
// run the pattern loops here
}
Example 3 — String.repeat for Spaces and Stars
Build each row’s padding and star run in one expression — same shape, no explicit character loops.
JavaScript
let rows = 5;
for (let i = 1; i <= rows; i++) {
console.log(" ".repeat(rows - i) + "*".repeat(i));
}
Output
*
**
***
****
*****
How It Works
1. One outer loop. Still walk i from 1 to rows.
2. Build the padding." ".repeat(rows - i) creates the leading spaces (empty string when i === rows).
3. Build and print stars."*".repeat(i) creates i stars; concatenating and logging ends the line.
Learn the two-loop version first (Examples 1–2) so you can explain both bounds in an interview; treat this as a polish shortcut afterward.
Edge Cases & Pitfalls
Check these before calling the solution done.
No spaces
Looks like Program 1
Skipping the space loop reprints the left-aligned triangle. Append rows - i spaces before the stars.
Swapped bounds
Broken right edge
Spaces must be rows - i and stars i. Swapping them loses the flush right edge.
console.log inside
Column of characters
If console.log is inside either inner loop, each character lands on its own line. Use line += for cells; log only after both loops.
Tabs
Use real spaces
Append " ", not tabs — tabs break alignment across fonts and editors.
rows = 1
Single star
0 spaces + 1 star — same as Program 1 for n = 1.
Bad prompt
Guard against NaN
Cancel or letters yield NaN — check Number.isFinite(rows) before looping.
Analysis
Time and Space Complexity
Program
Time
Extra space
Nested space/star loops (Examples 1–2)
O(rows²)
O(rows) for the line string
String.repeat (Example 3)
O(rows²)
O(rows) per temporary row string
Each of n rows builds Θ(n) characters (spaces + stars). Star count alone is still n(n+1)/2.
Remember
Key Takeaways
Rule: row i prints rows - i spaces, then i stars.
Two inner loops: padding first, then stars with line +=.
Width check: every row has length rows before console.log.
Complexity:O(n²) time; O(n) for the row string.
One line: for each row i, append rows - i spaces, then i stars, then console.log(line).
Frequently Asked Questions
The outer loop runs i from 1 to rows. For each row i, append (rows - i) spaces, then i stars. Row 1 has the most padding and one star; the last row has no spaces and rows stars.
Spaces and stars follow different formulas. One loop appends spaces from 1 to rows minus i; another appends stars from 1 to i. Without the space loop, output stays left-aligned like Program 1.
line += stays on the same row with no newline between characters. console.log(line) ends the row after both inner loops finish.
Program 1 appends only i stars per row. Program 3 appends (rows - i) spaces first, then i stars, so the same star counts sit flush on the right.
O(n²) where n is the number of rows. Each of n rows prints about n characters (spaces plus stars).
Yes. console.log(' '.repeat(rows - i) + '*'.repeat(i)) builds each row without explicit inner character loops.
Use parseInt(prompt(...), 10) and check Number.isFinite(rows) && rows >= 1 so bad input does not produce NaN rows.
The right edge no longer stays flush. Keep spaces = rows - i and stars = i.
🤔
Did you know?
Right-aligned and left-aligned triangles use the same star counts per row; only leading spaces change. Each row prints exactly rows characters before the newline: (rows - i) + i = rows.
