JavaScript Alphabet Triangle Pattern (Increasing Start)

Beginner
6 min read
Updated: Sep 2026
3 programs
Live preview

What Is This Pattern?

An increasing-start alphabet triangle keeps a fixed end letter on the right and moves the start letter one step later each row — so the left edge slides inward.

Remember
Rule: for start letter i from A to last,
      print i through last

ABCDE
BCDE
CDE
DE
E         ← 5 rows (right edge fixed at E)

Same widths as Program 5 (5, 4, 3, 2, 1), but Program 5 shortens the end while restarting at A. Here the start advances and the end stays put. Compare also with Program 3, which grows into the same right edge.

How to Solve It

Two ways to emit the same shape — start with nested charCodeAt loops, then optionally shorten with slice.

MethodIdeaBest for
Nested charCode loopsOuter = advancing start; inner = start..endLearning, interviews, exams
top.slice(i)Drop one left letter each row from a fixed prefixShorter demos once loops click

Pseudocode

Pseudocode
startBase = code of 'A'
end = startBase + rows - 1
for start from startBase to end:
    line = ""
    for code from start to end:
        append fromCharCode(code) to line
    print line

Cheat sheet

GoalPattern
Advance start codefor (let start = base; start <= end; start++)
Print start..endfor (let code = start; code <= end; code++) line += String.fromCharCode(code);
End the rowconsole.log(line);
End code from rowsconst end = "A".charCodeAt(0) + rows - 1;
One-line row shortcutconsole.log(top.slice(i)); while i advances
Left-fixed shrinkProgram 5 — restart at A, shorten end

Printing Letters vs Starting a New Line

APIEffectUse for
line += chStays on the same lineEach letter
console.log(line)Ends the current lineAfter the inner loop

Append letters without a newline, then end the row once.

Live Preview

Change the row count and the increasing-start triangle updates instantly — capped at 26 letters (A–Z).

Whole numbers from 1 to 26. Tap a chip or type a value — the preview redraws as you go.

Live result 5 rows · 15 letters
ABCDE
BCDE
CDE
DE
E

Worked Walkthrough — rows = 4

Trace each outer-loop start as start advances from A to D with end fixed at D.

StartInner codesPrinted rowLetters
AA..DABCD4
BB..DBCD3
CC..DCD2
DD..DD1

Total letter prints: 4 + 3 + 2 + 1 = 10 = 4×5/2 — same triangular count as Programs 1 and 5.

JavaScript Programs

Three complete programs: fixed end letter, prompt input, and a slice shortcut. Use View Output for sample results, or Try It Yourself to edit and run in the playground.

Example 1 — Fixed end at E

Hard-coded end — outer loop advances the start; inner loop prints from that start through E.

JavaScript
const base = "A".charCodeAt(0);
const end = "E".charCodeAt(0);

for (let start = base; start <= end; start++) {
  let line = "";
  for (let code = start; code <= end; code++) {
    line += String.fromCharCode(code);
  }
  console.log(line);
}
Try It Yourself

How It Works

1. Outer loop picks the start letter. start runs from A to E — longest row first.

2. Inner loop starts at start. For each start, code runs from start to end, so the row is start…E.

3. Print letters, then break the line. line += stays on the row; console.log(line) after the inner loop starts the next (shorter) row.

When start is A you get ABCDE; when it is E you get E.

Example 2 — User Input Version

Read the row count at runtime with prompt. Validate with parseInt and clamp to 26 for A–Z demos.

JavaScript
let rows = parseInt(prompt("Enter the number of rows:"), 10);
const base = "A".charCodeAt(0);

if (!Number.isFinite(rows) || rows < 1) {
  console.log("Please enter a whole number of rows >= 1.");
} else {
  if (rows > 26) rows = 26;
  const end = base + rows - 1;

  for (let start = base; start <= end; start++) {
    let line = "";
    for (let code = start; code <= end; code++) {
      line += String.fromCharCode(code);
    }
    console.log(line);
  }
}
Try It Yourself

How It Works

1. Prompt and parse. Ask for a row count, then convert with parseInt(..., 10).

2. Map rows to an end code. end = base + rows - 1 — for rows = 4, end is the code of D.

3. Same advance core. Only the source of end changes — the print logic matches Example 1.

Example 3 — top.slice(i)

Drop one left letter each row from a fixed prefix — same shape, no explicit inner letter loop.

JavaScript
let rows = 5;
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const top = letters.slice(0, rows);

for (let i = 0; i < rows; i++) {
  console.log(top.slice(i));
}
Try It Yourself

How It Works

1. Build the first row. top = letters.slice(0, rows) is ABCDE when rows = 5.

2. Slice from index i. top.slice(0) is the full row; slice(1) drops A; and so on.

3. Learn loops first. Use Examples 1–2 when you need to show nested bounds; treat this as a polish shortcut afterward.

Edge Cases & Pitfalls

Check these before calling the solution done.

code = base

Program 5 by mistake

If the inner loop starts at A instead of start, you print ABCDE, ABCD, … Use for (let code = start; …).

log inside

Column of letters

If console.log is inside the inner loop, each letter lands on its own line. Append with +=; call console.log only after the inner loop.

Wrong end

Off-by-one end letter

Use base + rows - 1. Forgetting - 1 pushes the end past the intended letter.

rows > 26

Past Z

Codes leave A–Z when rows > 26. Clamp or reject in interactive programs.

rows = 1

Single A

Output is just A — start and end coincide. A good sanity check.

Bad prompt

Use Number.isFinite

Bare parseInt(prompt()) yields NaN on letters — validate before the outer loop.

Time and Space Complexity

ProgramTimeExtra space
Nested loops (Examples 1–2)O(rows²)O(n) for the current line string
top.slice(i) (Example 3)O(rows²)O(n) for the prefix and temporary row strings

Total letters = n + (n - 1) + … + 1 = n(n + 1)/2 — quadratic in n. Same totals as Programs 1 and 5.

Key Takeaways

  • Rule: advance start letter; print that start through a fixed end each row.
  • vs Program 5: same widths — here the left edge moves; there the right edge moves.
  • Break the row: call console.log only after the inner loop.
  • Complexity: O(n²) time from the triangular letter count.

One line: for start from A to the end letter, append that start through the end, then console.log.

Frequently Asked Questions

The outer loop picks the starting letter (A, then B, then C…). The inner loop prints from that start up to a fixed end letter. Each row drops the leftmost character and becomes shorter.
Because the inner loop always stops at the same end letter code, so the last printed character is fixed on the right.
Program 5 restarts each row at A and shortens the end letter (ABCDE, ABCD, …). Program 6 shifts the start letter forward each row while keeping the same end letter (ABCDE, BCDE, …).
Program 3 grows while starting earlier (E, DE, CDE). This pattern shrinks while starting later (ABCDE, BCDE, CDE). Both keep a fixed right edge at the top letter.
line += stays on the same line. console.log ends the current line. Letters use +=; the row break uses console.log after the inner loop.
O(n²) for n rows, because total printed characters are n(n+1)/2.
Yes. Take letters.slice(0, rows), then console.log(top.slice(i)) while i runs from 0 to rows-1. Nested charCode loops are better for learning; slice is a handy shortcut later.
Use parseInt(prompt(...), 10), check Number.isFinite(rows), and clamp between 1 and 26 so letter codes stay within A–Z.

Did you know?

Each row starts one letter later but always ends at the same letter. For 5 rows: ABCDE, BCDE, CDE, DE, E. Same widths as Program 5, but the left edge moves instead of the right.

Next: Reverse Decreasing Triangle

Shrink while printing letters backward toward a fixed end.

Program 7 tutorial →

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.

12 people found this page helpful