Right-Angled Triangle Star Pattern in JavaScript

Q: How does the nested loop create a right-angled triangle?

The outer loop runs i from 1 to rows. For each row i, the inner loop runs j from 1 to i and appends a star to the line. Row 1 prints 1 star, row 2 prints 2 stars, and so on.

Q: Why use nested loops for this pattern?

You need one loop for which row you are on and another for how many characters belong on that row. Nested for loops express that directly.

Q: What is the difference between building a line and console.log?

line += '*' stays on the same row with no newline between stars. console.log(line) ends the row after the inner loop finishes.

Q: How do I print an inverted triangle?

Reverse the outer loop so i runs from rows down to 1, for example for (let i = rows; i >= 1; i--). The first line then has rows stars.

Beginner

⏱️ 8 min read

📚 Updated: Aug 2026

🎯 3 Code Examples

🚀 Live Preview

Nested Loops

Right-angled triangle star pattern output in JavaScript programming

Overview

What You’ll Learn

The right-angled triangle star pattern is the classic first console pattern: nested loops, line += "*" vs console.log(line), and a clear visual result. This tutorial covers the shape rule, loop structure, a live preview, algorithm steps, worked JavaScript examples, edge cases, and complexity.

Shape Rule

i stars on row i

Row 1 prints *, row 2 prints **, up to rows stars on the last line.

Outer Loop

Rows

for (let i = 1; i <= rows; i++) walks each line of the triangle.

Inner Loop

Stars

for (let j = 1; j <= i; j++) appends exactly i stars on that row.

print end= vs console.log(line)

Same line / next line

Stars use line += "*"; end each row with console.log(line).

Live Preview

1–20 rows

Pick a row count and draw the triangle instantly in the browser.

O(n²)

Complexity

Total stars = n(n+1)/2; extra memory stays O(1).

Introduction

A right-angled triangle star pattern grows by one * on each new line. With the right angle on the left, the console output looks like a staircase of stars.

In JavaScript you usually solve it with two nested for loops: the outer loop picks the row, the inner loop appends stars with line += "*", then console.log(line) moves to the next line.

Why it matters?

It is the standard first pattern exercise in JavaScript courses. Once nested loops and line += "*"/console.log(line) click, pyramids, diamonds, and hollow shapes become much easier.

Key Highlights

Row = Star Count

On row i, print exactly i stars.

Two Nested Loops

Outer controls rows; inner prints characters.

Print Then Break

line += "*" in the inner loop; console.log(line) after.

Series Foundation

Gateway to inverted, pyramid, and hollow patterns.

In short: for each row i from 1 to rows, append i stars with line += "*", then call console.log(line).

Foundation

📝 Problem & Approach

Given a positive integer rows, print a left-aligned right-angled triangle of * characters with rows lines.

JavaScript

// First 5 rows (conceptual shape)
// *
// **
// ***
// ****
// *****

Inputs & Outputs

Item	Type	Description
`rows`	int	Number of triangle lines to print (typically ≥ 1).
Printed output	text	Left-aligned rows of `*`; row `i` has `i` stars.

Minimal workflow

Pseudocode

for i from 1 to rows:
    for j from 1 to i:
        append "*"
    console.log(line)

Approach comparison

Approach	Idea	Best for
Nested loops	Outer rows + inner stars	Learning and interviews
`"*".repeat(i)`	Build a whole row in one call	Shorter production-style demos

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Walk each row	`for (let i = 1; i <= rows; i++)`
Print `i` stars	`for (let j = 1; j <= i; j++) line += "*"`
End the row	`console.log(line)`
One-line row shortcut	`console.log("*".repeat(i))`
Invert later	`for (let i = rows; i >= 1; i--)` (see Program 2)

Compare

📋 line += vs console.log vs "*".repeat

Same triangle - different ways to emit characters.

line += "*"

same line

Appends a star without moving to the next line

console.log(line)

new line

Ends the current row after all stars are appended

"*".repeat(i)

whole row

Builds i stars at once - skip the inner loop

Learning tip

loops first

Master nested loops before the string shortcut

Context

When This Pattern Shows Up

Reach for this triangle when teaching or testing nested-loop basics.

First lab exercise
Most JavaScript pattern series start here before pyramids and diamonds.
Nested-loop warm-up
Outer/inner bound practice with an immediate visual check.
Console output practice
Combine loops with prompt for a flexible row count.
Gateway to variants
Invert, center, hollow, or swap * for digits/letters next.
Not a UI layout tool
This is a console teaching pattern - not how you build modern app screens.

Key benefit: one small program that locks in nested loops, output sequencing, and O(n²) thinking.

Interactive

🔮 Live Preview

Choose a row count between 1 and 20 and draw the right-angled triangle in the browser.

Hands-On

Examples Gallery

Three complete JavaScript programs - fixed row count, prompt input, and a "*".repeat(i) shortcut. Click View Output to reveal sample console results, or Try it Yourself to run in the browser editor.

📚 Getting Started

Print five rows with classic nested loops.

Example 1 — Fixed `rows = 5`

Hard-coded height - ideal for first demos and screenshots.

JavaScript

let rows = 5;

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

Try it Yourself

How It Works

When i = 1, the inner loop runs once and appends *. When i = 2, it builds **, and so on until i = rows. console.log(line) after the inner loop starts the next row.

📈 Practical Variant

Let the user choose the height at runtime.

Example 2 — User Input Version

Read the row count with prompt and parseInt (validate with Number.isFinite in real apps).

JavaScript

let rows = parseInt(prompt("Enter the number of rows:"), 10);
if (!Number.isFinite(rows) || rows < 1) {
  console.log("Please enter a whole number of rows >= 1.");
} else {
  for (let i = 1; i <= rows; i++) {
    let line = "";
    for (let j = 1; j <= i; j++) {
      line += "*";
    }
    console.log(line);
  }
}

Try it Yourself

How It Works

Same nested-loop core as Example 1; only the source of rows changes. Non-numeric input yields NaN with bare parseInt(prompt(), 10) - validate with Number.isFinite for safer labs.

⚡ Shortcut Style

Same shape without an explicit inner star loop.

Example 3 — `"*".repeat(i)`

Build each row in one call, then log it.

JavaScript

let rows = 5;

for (let i = 1; i <= rows; i++) {
  console.log("*".repeat(i));
}

Try it Yourself

How It Works

"*".repeat(i) creates a string of length i filled with stars. Great once you understand the nested-loop idea; keep the two-loop version for exams that ask you to show both bounds.

🧠 How the Algorithm Prints Rows

Set up

Set rows (fixed or from prompt), then prepare to build each row as a string.

Setup

Outer loop (rows)

for (let i = 1; i <= rows; i++) selects the current line.

Row

Inner loop (stars)

for (let j = 1; j <= i; j++) appends exactly i stars with line += "*".

Stars

New line

console.log(line) ends the row so the next outer iteration starts fresh.

Break

Triangle complete

Total stars: 1+2+…+n = n(n+1)/2 — O(n²) time, O(1) extra memory.

Trace

🔎 Worked Walkthrough — `rows = 4`

Trace each outer-loop value of i and count how many times the inner loop runs.

`i`	Inner `j` range	Printed row	Stars this row
`1`	`1..1`	`*`	1
`2`	`1..2`	`**`	2
`3`	`1..3`	`***`	3
`4`	`1..4`	`****`	4

Total star prints: 1 + 2 + 3 + 4 = 10 = 4×5/2.

Use Cases

Where this tiny pattern (and its loop structure) shows up beyond the homework prompt.

1. Teaching Nested Loops

Clearest visual proof that outer and inner bounds interact.

Example: change j <= i and watch the shape change.

2. Pattern Series Base

Foundation for inverted, pyramid, diamond, and hollow variants.

Example: Program 2 only reverses the outer loop.

3. Console Formatting Drills

Practice line += "*" vs console.log(line) without complex math.

Example: put console.log(line) inside the inner loop by mistake.

4. Character Substitution

Swap * for digits, letters, or emoji once the loop works.

Example: print i instead of * for a number triangle.

5. Complexity Intuition

Triangular totals make O(n²) concrete for beginners.

Example: count printed stars for n = 10 → 55.

6. Input Validation Labs

Pair the pattern with input validation and positive-row checks.

Example: reject rows <= 0 and re-prompt.

Pro Tip: when an interviewer asks for patterns, explain the outer/inner roles first - then write the loops. The story matters as much as the code.

Advantages

Why this pattern earns a permanent spot in beginner JavaScript courses.

1. Instant Visual Feedback
Wrong bounds show up immediately as a broken staircase.
2. Minimal Concepts
Only loops and console output - no arrays or math libraries.
3. Easy to Extend
Invert, center, hollow, or change the fill character with small edits.
4. O(1) Extra Memory
Streaming output needs no storage beyond loop counters.

Pro Tip: learn the nested-loop version first; treat "*".repeat(i) as a polish shortcut afterward.

Usage Tips

Small habits that keep star-pattern code clean.

1. Name Bounds Clearly
Use rows (or n) and keep i/j for row/column - or rename to row/col.
2. Wrap parseInt(prompt(), 10) in try/except
Avoid crashes when the user types letters instead of a number.
3. Keep console.log(line) Outside
Only call console.log(line) after the inner loop finishes the row.
4. Start 1-Based for This Shape
1..rows with j <= i matches “row i has i stars” naturally.
5. Dry-Run One Small n
Trace rows = 3 on paper before coding larger demos.

Pro Tip: if the output is a vertical list of single stars, you almost certainly put console.log(line) inside the inner loop.

Common Pitfalls

Mistakes that commonly break right-angled star patterns.

1. console.log(line) Inside the Inner Loop
Each star lands on its own line - you get a column, not a triangle.
→ Use line += "*" for stars; console.log(line) only after the inner loop.
2. Wrong Inner Bound
j <= rows prints a rectangle; j < i drops a star each row.
→ For this shape, keep j <= i.
3. Forgetting the Row Break
Omitting console.log(line) after the inner loop glues every star onto one endless line.
→ Always end the row after the inner loop.
4. Blind parseInt(prompt(), 10)
Letters or empty input raise NaN.
→ Catch NaN and re-prompt on failure.
5. Off-by-One on 0-Based Loops
Switching to i = 0 without adjusting the inner bound prints an empty first row or wrong counts.
→ If 0-based, print i + 1 stars (e.g. j <= i + 1).

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single star

Output is just * on one line.

rows = 0

Empty pattern

Outer loop never runs - print nothing or show a message.

Negative

`rows < 0`

Treat as invalid; re-prompt instead of silent empty output.

Large n

Many rows

Output grows as n²/2 characters - fine for labs, noisy for huge n.

Bad input

Non-numeric prompt

parseInt(prompt(), 10) yields NaN - validate first.

Fill char

Not only `*`

Same loops work with #, digits, or letters.

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Invert the triangle

Outer loop from rows down to 1
Continue with Program 2

2. Print digits instead

Replace * with j or i
Shows the loop structure is reusable

3. Safe input loop

Validate input until rows >= 1
Then draw the triangle

4. Hollow right triangle

Print * only on borders; spaces inside
Harder follow-up after this page

Important

Notes

Triangular count. Total stars for n rows is n(n+1)/2 - hence O(n²) time.
line += "*" stays on the line; console.log(line) advances - mix them carefully.
Validate rows > 0 for interactive programs; rows = 1 should print a single star.
This page is left-aligned. Centered pyramids need leading spaces - covered later in the series.

Quick Takeaway: outer loop picks the row, inner loop prints i stars, then break the line - that is the whole pattern.

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Nested loops (Examples 1–2)	`O(rows²)`	`O(1)`
`"*".repeat(i)` (Example 3)	`O(rows²)`	`O(rows)` per row string (temporary)

Wrap Up

🎉 Conclusion

The right-angled triangle star pattern is a small nested-loop exercise with lasting payoff: row/column thinking, line += "*" vs console.log(line), and O(n²) intuition. Master the classic two-loop version, then optionally shorten rows with "*".repeat(i).

Practice the three examples above, then continue to the inverted triangle for reverse outer-loop practice.

Row i has i stars - keep line += "*" for stars and console.log(line) for the break, and validate row counts when reading input.

View Examples Gallery Continue to Inverted Triangle

Pro Tips

💡 Best Practices

✅ Do

Explain outer = rows, inner = stars before coding
Use line += "*" for stars and console.log(line) after each row
Validate rows ≥ 1 for interactive programs
Wrap parseInt(prompt(), 10) in Number.isFinite
State O(n²) time when asked about complexity

❌ Don’t

Call console.log(line) inside the inner star loop
Use j <= rows when you meant a growing triangle
Skip the newline after each row
Ignore bad console input in user-facing demos
Skip the rows = 1 edge case

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this star pattern

Print the triangle the beginner-friendly way.

Core concepts

△ 01

Rule

Row i has i stars

Definition

↻ 02

Outer loop

Controls each row

Code

* 03

Inner loop

Prints stars with print

Code

↵ 04

console.log(line)

Ends each row

I/O

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

How does the nested loop create a right-angled triangle?

The outer loop runs i from 1 to rows. For each row i, the inner loop runs j from 1 to i and appends a star to the line. Row 1 prints 1 star, row 2 prints 2 stars, and so on.

Why use nested loops for this pattern?

You need one loop for which row you are on and another for how many characters belong on that row. Nested for loops express that directly.

What is the difference between building a line and console.log?

line += '*' stays on the same row with no newline between stars. console.log(line) ends the row after the inner loop finishes.

How do I print an inverted triangle?

Reverse the outer loop so i runs from rows down to 1, for example for (let i = rows; i >= 1; i--). The first line then has rows stars.

What is the time complexity?

O(n^2) where n is the number of rows. Total star characters equal 1+2+...+n = n(n+1)/2.

Can I use string.repeat instead of an inner loop?

Yes. console.log('*'.repeat(i)) prints a full row in one call. Nested loops are better for learning; '*'.repeat(i) is a handy shortcut later.

How should I read the row count safely?

Use parseInt(prompt(), 10) and check Number.isFinite so bad input does not produce NaN rows.

What happens if rows is 0 or negative?

The outer loop never runs, so nothing is printed. Validate and prompt again if you want a clear user message.

Did you Know? 🔊

Row i prints exactly i stars. Total stars for n rows is the triangular number n(n+1)/2 - the same count that makes this pattern O(n²).

Continue to Inverted Triangle

Flip the outer loop and print an upside-down right-angled star pattern.

Program 2 tutorial →

About the author

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 Star Pattern Programs JavaScript Star Pattern 2 - Inverted Triangle

Right-Angled Triangle Star Pattern in JavaScript

What You’ll Learn

Shape Rule

Outer Loop

Inner Loop

print end= vs console.log(line)

Live Preview

O(n²)

Introduction

Why it matters?

Row = Star Count

Two Nested Loops

Print Then Break

Series Foundation

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 line += vs console.log vs "*".repeat

When This Pattern Shows Up

First lab exercise

Nested-loop warm-up

Console output practice

Gateway to variants

Not a UI layout tool

🔮 Live Preview

Examples Gallery

📚 Getting Started

Example 1 — Fixed rows = 5

How It Works

📈 Practical Variant

Example 2 — User Input Version

How It Works

⚡ Shortcut Style

Example 3 — "*".repeat(i)

How It Works

🧠 How the Algorithm Prints Rows

Set up

Outer loop (rows)

Inner loop (stars)

New line

Triangle complete

🔎 Worked Walkthrough — rows = 4

Use Cases

1. Teaching Nested Loops

2. Pattern Series Base

3. Console Formatting Drills

4. Character Substitution

5. Complexity Intuition

6. Input Validation Labs

Advantages

1. Instant Visual Feedback

2. Minimal Concepts

3. Easy to Extend

4. O(1) Extra Memory

Usage Tips

1. Name Bounds Clearly

2. Wrap parseInt(prompt(), 10) in try/except

3. Keep console.log(line) Outside

4. Start 1-Based for This Shape

5. Dry-Run One Small n

Common Pitfalls

1. console.log(line) Inside the Inner Loop

2. Wrong Inner Bound

3. Forgetting the Row Break

4. Blind parseInt(prompt(), 10)

5. Off-by-One on 0-Based Loops

Edge Cases

Single star

Empty pattern

rows < 0

Many rows

Non-numeric prompt

Not only *

🎯 Practice Problems

1. Invert the triangle

2. Print digits instead

3. Safe input loop

4. Hollow right triangle

Example 1 — Fixed `rows = 5`

Example 3 — `"*".repeat(i)`

🔎 Worked Walkthrough — `rows = 4`

2. Wrap `parseInt(prompt(), 10)` in try/except

`rows < 0`

Not only `*`