Alphabet Right-Angled Triangle Pattern in JavaScript

Beginner

⏱️ 8 min read

📚 Updated: Aug 2026

🎯 3 Code Examples

🚀 Live Preview

Nested Loops

Alphabet right-angled triangle pattern output in JavaScript programming

Overview

What You’ll Learn

The alphabet right-angled triangle is a classic first console letter pattern: nested loops, char iteration from A, 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

A..end letter on row i

Row 1 prints A, row 2 prints AB, up to rows letters on the last line.

Outer Loop

Rows

for (let i = 1; i <= rows; i++) picks how many letters each row prints.

Inner Loop

Letters

for (let code = start; code < start + i; code++) prints letters from A through the i-th letter.

line vs console.log

Same line / next line

Letters use line += String.fromCharCode(code); end each row with console.log(line).

Live Preview

1–26 rows

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

O(n²)

Complexity

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

Introduction

An alphabet right-angled triangle pattern grows by one letter on each new line. With the right angle on the left, the console output looks like a staircase of letters.

In JavaScript you usually solve it with two nested for loops: the outer loop picks the row, the inner loop prints letters from A on that row, 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 += String.fromCharCode(code)/console.log(line) click, inverted triangles, pyramids, and more letter patterns become much easier.

Key Highlights

Row = Letter Count

On row i, print letters from A through the i-th letter.

Two Nested Loops

Outer controls rows; inner prints characters.

Build Then Log

line += String.fromCharCode(code) 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, print letters from A with line += String.fromCharCode(code), then call console.log(line).

Foundation

📝 Problem & Approach

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

JavaScript

// First 5 rows (conceptual shape)
// A
// AB
// ABC
// ABCD
// ABCDE

Inputs & Outputs

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

Minimal workflow

Pseudocode

for i from 1 to rows:
    for j from 1 to i:
        append next letter from A (no newline)
    console.log the row

Approach comparison

Approach	Idea	Best for
Nested loops	Outer rows + inner letters	Learning and interviews
`letters.slice(0, 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 `A..end` letters	`for (let code = start; code < start + i; code++) line += String.fromCharCode(code)`
End the row	`console.log(line)`
One-line row shortcut	`console.log(letters.slice(0, i))`
Invert later	Shrink end letter each row (see Program 2)

Compare

📋 line vs console.log vs slice

Same triangle - different ways to emit characters.

line += String.fromCharCode(code)

same line

Prints a letter without moving to the next line

console.log(line)

new line

Ends the current row after all letters are printed

letters.slice(0, i)

whole row

Builds letters A..end 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 alphabet pattern series start here before inverted and pyramid letter patterns.
Nested-loop warm-up
Outer/inner bound practice with an immediate visual check.
prompt() input practice
Combine loops with prompt() for a flexible row count.
Gateway to variants
Invert, center, hollow, or try lowercase 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 letters.slice(0, 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

const rows = 5;
const start = "A".charCodeAt(0);

for (let i = 1; i <= rows; i++) {
  let line = "";
  for (let code = start; code < start + i; code++) {
    line += String.fromCharCode(code);
  }
  console.log(line);
}

Try it Yourself

How It Works

When i = 1, the inner loop builds A. When i = 2, it builds AB, and so on through five letters on the last row. 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 convert with parseInt() (validate with Number.isFinite in real apps).

JavaScript

const rowsInput = prompt("Enter the number of rows:");
let rows = parseInt(rowsInput, 10);
rows = Math.max(1, Math.min(rows, 26));
const start = "A".charCodeAt(0);

for (let i = 1; i <= rows; i++) {
  let line = "";
  for (let code = start; code < start + i; code++) {
    line += String.fromCharCode(code);
  }
  console.log(line);
}

Try it Yourself

How It Works

Same charCodeAt/fromCharCode core as Example 1; only the source of rows changes. Prefer clamping to 26 for A-Z demos. Non-numeric input yields NaN with bare parseInt(prompt()) - validate with Number.isFinite for safer labs.

⚡ Shortcut Style

Same shape without an explicit inner letter loop.

Example 3 — `letters.slice(0, i)`

Slice A-Z for each row length with letters.slice(0, i), then log it.

JavaScript

const rows = 5;
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

for (let i = 1; i <= rows; i++) {
  console.log(letters.slice(0, i));
}

Try it Yourself

How It Works

letters.slice(0, i) returns the first i letters of the alphabet. 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

Use prompt() when reading input. Set rows (fixed or from user).

Setup

Outer loop (rows)

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

Row

Inner loop (letters)

for (let code = start; code < start + i; code++) prints each letter with line += String.fromCharCode(code).

Letters

New line

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

Break

Alphabet triangle complete

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

Trace

🔎 Worked Walkthrough — `rows = 4`

Trace each outer-loop end letter and see what the inner loop prints from A.

End letter	Inner `j` range	Printed row	Letters this row
`'A'`	`A..A`	`A`	1
`'B'`	`A..B`	`AB`	2
`'C'`	`A..C`	`ABC`	3
`'D'`	`A..D`	`ABCD`	4

Total letter 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 character loops and line += String.fromCharCode(code)/console.log(line) without complex math.

Example: forget to reset the inner loop to A each row.

4. Character Substitution

Swap to lowercase or digits once the letter loop works.

Example: print lowercase a..z once uppercase clicks.

5. Complexity Intuition

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

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

6. Input Validation Labs

Pair the pattern with Number.isFinite 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 letters.slice(0, i) as a polish shortcut afterward.

Usage Tips

Small habits that keep alphabet-pattern code clean.

1. Name Bounds Clearly
Use rows (or n) and keep i/j for row/column - or rename to row/col.
2. Validate prompt() input
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 for (let code = start; code < start + i; code++) matches “row i has i letters from A” 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 letters, you almost certainly put console.log(line) inside the inner loop.

Common Pitfalls

Mistakes that commonly break right-angled alphabet patterns.

1. console.log(line) Inside the Inner Loop
Each letter lands on its own line - you get a column, not a triangle.
→ Use line += String.fromCharCode(code) for letters; console.log(line) only after the inner loop.
2. Wrong Inner Bound
for (let code = start; code < start + rows; code++) prints a rectangle; stopping early drops a letter each row.
→ For this shape, keep for (let code = start; code < start + i; code++).
3. Forgetting the Row Break
Omitting console.log(line) after the inner loop glues every letter onto one endless line.
→ Always end the row after the inner loop.
4. Blind parseInt(prompt())
Non-numeric input yields NaN with bare parseInt(prompt()).
→ Check with Number.isFinite and clamp the range.
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 letters (e.g. j <= i + 1).

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single letter

Output is just A 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 input

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

Fill char

Not only uppercase

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

Try lowercase a..z the same way
Shows the loop structure is reusable

3. Safe input loop

Use Number.isFinite until rows >= 1
Then draw the triangle

4. Hollow right triangle

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

Important

Notes

Triangular count. Total letters for n rows is n(n+1)/2 - hence O(n²) time.
line += String.fromCharCode(code) stays on the line; console.log(line) advances - mix them carefully.
Validate rows > 0 for interactive programs; rows = 1 should print a single A.
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 A..end, 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)`
`letters.slice(0, i)` (Example 3)	`O(rows²)`	`O(rows)` per row string (temporary)

Wrap Up

🎉 Conclusion

The alphabet right-angled triangle is a small nested-loop exercise with lasting payoff: row/column thinking, line += String.fromCharCode(code) vs console.log(line), and O(n²) intuition. Master the classic two-loop version, then optionally shorten rows with letters.slice(0, i).

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

Row i has i letters - keep line += String.fromCharCode(code) for letters and console.log(line) for the break, and validate row counts when reading input.

View Examples Gallery Continue to Inverted Alphabet Triangle

Pro Tips

💡 Best Practices

✅ Do

Explain outer = row length, inner = A..end codes before coding
Use line += String.fromCharCode(code) for letters and console.log(line) after each row
Validate rows ≥ 1 for interactive programs
Validate parseInt(prompt()) with Number.isFinite
State O(n²) time when asked about complexity

❌ Don’t

Call console.log(line) inside the inner letter loop
Forget to restart at A each row
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 alphabet pattern

Print the letter triangle the beginner-friendly way.

Core concepts

△ 01

Rule

Row i has A..end letters

Definition

↻ 02

Outer loop

Controls each row

Code

A 03

Inner loop

Builds A..end then console.log

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 an alphabet triangle?

The outer loop picks the row length. The inner loop walks letter codes from "A".charCodeAt(0) through that many characters, so row 1 is A, row 2 is AB, row 3 is ABC, and so on.

Why restart the inner loop at A every row?

Each row is a fresh sequence from A to the current end letter. If you kept advancing a single char across rows, you would get a different pattern (not this right-angled alphabet triangle).

What is the difference between building a line and logging inside the inner loop?

line += String.fromCharCode(code) builds the full row string. console.log() inside the inner loop would log one letter per line. Log once after the inner loop finishes.

How do I print an inverted alphabet triangle?

Shrink the end letter each row - for example walk the outer loop from rows down to 1, or console.log(letters.slice(0, i)) with a decreasing i. See Alphabet Pattern Program 2.

What is the time complexity?

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

Can I avoid the inner loop?

Yes. Keep a string of A-Z and console.log(letters.slice(0, i)) for row length i. Nested charCodeAt/fromCharCode loops are better for learning; slicing is a handy shortcut later.

How should I read the row count safely?

Use parseInt with Number.isFinite after prompt(), then clamp rows between 1 and 26 so letter codes stay within A-Z.

What happens if rows is greater than 26?

Letter codes can produce characters beyond Z. Clamp to 26 for A-Z demos, or define a clear wrap/error policy.

Did you Know? 🔊

Row i logs letters from A through the i-th letter (A, AB, ABC, …). Total letters for n rows is the triangular number n(n+1)/2 - the same count that makes this pattern O(n²).

Continue to Inverted Alphabet Triangle

Shrink the end letter each row for an upside-down alphabet triangle.

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

Alphabet Right-Angled Triangle Pattern in JavaScript

What You’ll Learn

Shape Rule

Outer Loop

Inner Loop

line vs console.log

Live Preview

O(n²)

Introduction

Why it matters?

Row = Letter Count

Two Nested Loops

Build Then Log

Series Foundation

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 line vs console.log vs slice

When This Pattern Shows Up

First lab exercise

Nested-loop warm-up

prompt() input 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 — letters.slice(0, i)

How It Works

🧠 How the Algorithm Prints Rows

Set up

Outer loop (rows)

Inner loop (letters)

New line

Alphabet 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. Validate prompt() input

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())

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

Edge Cases

Single letter

Empty pattern

rows < 0

Many rows

Non-numeric input

Not only uppercase

🎯 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 — `letters.slice(0, i)`

🔎 Worked Walkthrough — `rows = 4`

`rows < 0`