Sequential Alphabet Triangle in JavaScript

Beginner

⏱️ 8 min read

📚 Updated: Aug 2026

🎯 3 Code Examples

🚀 Live Preview

Nested Loops

Sequential alphabet triangle A, B C, D E F through K L M N O in JavaScript programming

Overview

What You’ll Learn

Each row is wider than the last, but letters stay in order across the whole shape: A, then B C, then D E F, up to K L M N O for five rows. This differs from Program 1 (letters reset per row); here one counter walks the alphabet continuously. Includes a live preview, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Grow width, keep sequence

Row i prints i consecutive letters from a running counter.

Running Char

Never reset

code = "A".charCodeAt(0) lives outside the outer loop and advances across rows.

Inner Loop

Print then code++

Each cell prints String.fromCharCode(code), optionally a space, then code++.

line vs console.log

Same line / next line

Letters use line += ch; end each row with console.log(line).

Live Preview

1–7 rows

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

O(n²)

Complexity

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

Introduction

A sequential alphabet triangle grows by one letter on each new line, but the alphabet does not restart. Letters flow continuously: the last letter on one row is followed by the next letter on the next row.

In JavaScript you usually solve it with nested for loops plus a third variable code that increments after every print. Optional spaces between letters make the output easier to read.

Why it matters?

It is the classic “running counter” pattern. Once you can keep state across rows, many continuous fill patterns (letters, digits, or custom sequences) become straightforward.

Key Highlights

Continuous Letters

One code walks A, B, C… across the whole triangle.

Width Still Grows

Outer loop still prints 1, 2, 3, … letters per row.

Increment Per Cell

code++ belongs inside the inner loop, not after the row.

Not Program 1

Program 1 resets to A each row; this one never resets.

In short: start code = "A".charCodeAt(0), for each row print i letters with line += String.fromCharCode(code) then code++, and call console.log(line) after the row.

Foundation

📝 Problem & Approach

Given a positive integer rows, print a left-aligned triangle of consecutive alphabet letters where row i has i letters and the sequence never resets.

JavaScript

// First 5 rows (with spaces)
// A
// B C
// D E F
// G H I J
// K L M N O

Inputs & Outputs

Item	Type	Description
`rows`	int	Number of triangle lines. For A–Z only, keep `rows(rows+1)/2 ≤ 26` (max 6 full rows, or 7 with overflow past Z).
Printed output	text	Left-aligned consecutive letters; optional spaces between letters on a row.

Minimal workflow

Pseudocode

code = "A".charCodeAt(0)
for i from 1 to rows:
    for j from 1 to i:
        print String.fromCharCode(code) (no newline)
        if j < i: append space
        code++
    console.log the row

Approach comparison

Approach	Idea	Best for
Running `code`	Outer width + inner print/`code++`	Learning and interviews
Integer index	`ch = String.fromCharCode("A".charCodeAt(0) + count); count++`	Same idea with an int counter

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Start the sequence	`code = "A".charCodeAt(0)` (outside outer loop)
Grow row width	`for (let i = 1; i <= rows; i++)`
Print next letter	`line += String.fromCharCode(code); code++`
Space between letters	`if (j < i) line += " "`
End the row	`console.log(line)`
Reset-per-row style	See Program 1 (A, AB, ABC, …)

Compare

📋 line vs console.log vs code++

Same triangle - different roles for each tool.

line += ch

same line

Prints a letter or space without moving to the next line

console.log(line)

new line

Ends the current row after all letters are printed

code++

next letter

Advances the running character after each cell

Learning tip

no reset

Do not set code = "A".charCodeAt(0) inside the outer loop

Context

When This Pattern Shows Up

Reach for a running counter when values must continue across rows.

After Program 1
Contrast reset-per-row letters with a continuous sequence.
State across loops
Practice keeping mutable state outside the outer loop.
Digit / token fills
Same idea works with numbers or any ordered token stream.
Gateway to Program 14
Next: odd-length rows that still start from A each time.
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 continuous state across nested loops - a skill used far beyond alphabet demos.

Interactive

🔮 Live Preview

Choose a row count between 1 and 7 and draw the sequential alphabet triangle in the browser (spaces between letters).

Hands-On

Examples Gallery

Three complete JavaScript programs - fixed rows with spaces, prompt input, and a compact no-space variant. Click View Output to reveal sample console results, or Try it Yourself to run in the browser editor.

📚 Getting Started

Print five sequential rows with a running character and spaces.

Example 1 — Fixed `rows = 5`

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

JavaScript

let code = "A".charCodeAt(0);

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

Try it Yourself

How It Works

code starts at "A".charCodeAt(0) and never resets. Row 1 builds A, row 2 builds B C, and so on. code++ after each letter keeps the sequence continuous.

📈 Practical Variant

Let the user choose the height at runtime.

Example 2 — User Input Version

Read rows and keep appending. Validate parseInt(prompt()) with Number.isFinite in real apps; cap rows for A-Z if needed.

JavaScript

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

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

Try it Yourself

How It Works

Same running-code core as Example 1; only the outer bound changes. For A-Z-only demos, stop when code > "Z".charCodeAt(0) or clamp so rows(rows+1)/2 ≤ 26.

⚡ Compact Style

Same sequence without spaces between letters.

Example 3 — No Spaces

Drop the space append for a denser triangle.

JavaScript

let code = "A".charCodeAt(0);

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

Try it Yourself

How It Works

Same continuous code++ logic as Example 1, without spaces between letters on a row. Great for denser console output; keep the spaced version when readability matters.

🧠 How the Algorithm Prints Rows

Set up

Use prompt() when reading input. Start code = "A".charCodeAt(0) before the outer loop.

Setup

Outer loop (width)

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

1..n

Inner loop (cells)

Print String.fromCharCode(code), optional space, then code++ so the next cell gets the next letter.

code++

New line

console.log(line) ends the row; code keeps its value for the next row.

Break

Triangle complete

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

Trace

🔎 Worked Walkthrough — `rows = 5`

Trace each outer-loop value of i and watch how code advances across the whole triangle.

`i`	`code` before row	Printed row	`code` after row
`1`	`'A'`	`A`	`'B'`
`2`	`'B'`	`B C`	`'D'`
`3`	`'D'`	`D E F`	`'G'`
`4`	`'G'`	`G H I J`	`'K'`
`5`	`'K'`	`K L M N O`	`'P'`

Total letter prints: 1 + 2 + 3 + 4 + 5 = 15 = 5×6/2 (A through O).

Use Cases

Where this tiny pattern (and its running counter) shows up beyond the homework prompt.

1. Continuous State Drill

Clearest demo that loop counters and printed values can be different variables.

Example: move code++ outside the inner loop and watch letters repeat.

2. Contrast with Program 1

Teach reset-per-row vs continuous-fill as a one-idea change.

Example: side-by-side A/AB/ABC vs A/BC/DEF.

3. Number Triangles

Swap code for an integer counter to print 1, 2 3, 4 5 6, …

Example: start n = 1 and print/increment the same way.

4. Formatting Variants

Add/remove spaces, or print commas, without changing the sequence logic.

Example: Example 3 drops spaces for a compact fill.

5. Complexity Intuition

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

Example: 5 rows → 15 letters (A–O).

6. Alphabet Bounds Labs

Pair the pattern with a “stop at Z” or wrap policy.

Example: break when code > "Z".charCodeAt(0).

Pro Tip: say “one counter walks the alphabet; the outer loop only chooses how many to print” before coding - that story prevents resetting code each row.

Advantages

Why this pattern earns a spot after the repeating-letter triangles.

1. Instant Visual Feedback
Wrong increment placement shows up immediately as repeated letters.
2. Minimal Concepts
Only loops, one extra char, and console output.
3. Easy to Adapt
Swap letters for digits or remove spaces with tiny edits.
4. O(1) Extra Memory
Streaming output needs no storage beyond loop counters and code.

Pro Tip: keep code outside the outer loop; resetting it each row accidentally recreates Program 1’s shape with a different letter rule.

Usage Tips

Small habits that keep sequential-pattern code clean.

1. Name the Runner
Use code or nextLetter for the sequence - keep i/j for row/column.
2. Validate prompt() input
Avoid crashes when the user types letters instead of a number.
3. Increment Per Cell
Put code++ inside the inner loop, after printing.
4. Watch the Alphabet Cap
Six rows use 21 letters; seven need 28 - past Z unless you wrap/stop.
5. Dry-Run One Small n
Trace rows = 3 (A / B C / D E F) on paper before coding larger demos.

Pro Tip: if every row starts with A, you almost certainly reset code inside the outer loop.

Common Pitfalls

Mistakes that commonly break sequential alphabet patterns.

1. Resetting code Each Row
Setting code = "A".charCodeAt(0) inside the outer loop recreates a reset-style triangle.
→ Declare and initialize code once, before the outer loop.
2. Incrementing Only Once Per Row
Moving code++ after the inner loop repeats the same letter across the row.
→ Increment inside the inner loop after each print.
3. console.log(line) Inside the Inner Loop
Each letter lands on its own line - you get a column, not a triangle.
→ Use line += ch for letters; console.log(line) only after the inner loop.
4. Blind parseInt(prompt())
Non-numeric input yields NaN with bare parseInt(prompt()).
→ Validate parseInt(prompt()) with Number.isFinite and validate range.
5. Ignoring the Z Boundary
Large rows walk past 'Z' into non-letter characters.
→ Cap rows or stop when code > "Z".charCodeAt(0) for A–Z demos.

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

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

rows = 6

Last full A–Z fit

21 letters (A–U). Still inside A–Z.

rows = 7

Past Z

28 letters needed - define wrap/stop policy.

Bad input

Non-numeric input

Non-numeric input becomes 0 - check Number.isFinite first.

Case

Lowercase variant

Same loops work with code = "a".charCodeAt(0).

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Compare with Program 1

Reset to A each row vs continuous code
See Program 1

2. Number version

Print 1 / 2 3 / 4 5 6 / …
Same loops, int counter

3. Stop at Z

Break when code > "Z".charCodeAt(0)
Partial last row is OK

4. Odd-length next

Continue to Program 14
Rows of length 1, 3, 5, …

Important

Notes

Triangular count. Total letters for n rows is n(n+1)/2 - hence O(n²) time.
Keep code outside the outer loop; increment it inside the inner loop.
Spaces are optional formatting - they do not change the letter sequence.
Decide what happens past Z before accepting large row counts.

Quick Takeaway: outer loop picks the width, running code supplies consecutive letters, then break the line - that is the whole pattern.

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Nested loops (Examples 1-3)	`O(rows²)`	`O(1)`

Wrap Up

🎉 Conclusion

The sequential alphabet triangle is a small nested-loop exercise with lasting payoff: continuous state across rows, line += ch vs console.log(line), and O(n²) intuition. Master the running-code version, then optionally drop spaces for a compact fill.

Practice the three examples above, then continue to Program 14’s odd-length alphabet rows.

Keep code outside the outer loop, increment it per cell, and decide what happens after Z before accepting large row counts.

View Examples Gallery Continue to Program 14

Pro Tips

💡 Best Practices

✅ Do

Initialize code once before the outer loop
Increment code inside the inner loop after each print
Use line += String.fromCharCode(code) for letters and console.log(line) after each row
Check Number.isFinite after prompt()
State O(n²) time and the triangular letter count when asked

❌ Don’t

Reset code = "A".charCodeAt(0) on every outer iteration
Increment only once per row if you want per-cell sequences
Call console.log(line) inside the inner letter loop
Ignore the Z boundary for large row counts
Confuse this with Program 1’s reset-per-row rule

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this alphabet pattern

Print the sequential triangle the beginner-friendly way.

Core concepts

△ 01

Rule

Continuous letters, growing width

Definition

A+ 02

Running char

Never reset between rows

Code

++ 03

Inner loop

Print then code++

Code

↵ 04

console.log(line)

Ends each row

I/O

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

Why don't letters restart from A on each row?

Because the letter code is updated after every appended character and is not reset inside the outer loop. That is what makes the sequence continuous across the triangle.

Why does the output look like A, then B C, then D E F?

A single running character starts at A and increments after every append. Row 1 logs 1 character, row 2 logs 2, row 3 logs 3, so you see consecutive letters across the whole triangle.

Why do we increment the character inside the inner loop?

Because each cell must use a new next letter. If you incremented only once per row, the wider rows would repeat the same letter.

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

line += String.fromCharCode(code) (and optional spaces) 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 many letters are printed for n rows?

1+2+...+n = n(n+1)/2. For 5 rows that is 15 letters (A through O).

What is the time complexity?

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

What happens after Z?

Plain code++ continues past Z into later Unicode code points. Cap rows so n(n+1)/2 <= 26, or stop when code > "Z".charCodeAt(0), if you want A-Z only.

How should I read the row count safely?

Use parseInt with Number.isFinite after prompt(), then clamp rows so the triangular letter count stays in range for your alphabet policy.

Did you Know? 🔊

Unlike Program 1 (letters reset to A each row), this pattern uses one running character that increments after every append. Letters stay consecutive across the whole triangle: A, then B C, then D E F, and so on.

Continue to Alphabet Pattern 14

Next up: odd-length rows (A, ABC, ABCDE, …) stepping the end letter by two.

Program 14 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 12 - Inverted Forward Repeats JavaScript Alphabet Pattern 14 - Odd-Length Triangle

Sequential Alphabet Triangle in JavaScript

What You’ll Learn

Shape Rule

Running Char

Inner Loop

line vs console.log

Live Preview

O(n²)

Introduction

Why it matters?

Continuous Letters

Width Still Grows

Increment Per Cell

Not Program 1

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 line vs console.log vs code++

When This Pattern Shows Up

After Program 1

State across loops

Digit / token fills

Gateway to Program 14

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

⚡ Compact Style

Example 3 — No Spaces

How It Works

🧠 How the Algorithm Prints Rows

Set up

Outer loop (width)

Inner loop (cells)

New line

Triangle complete

🔎 Worked Walkthrough — rows = 5

Use Cases

1. Continuous State Drill

2. Contrast with Program 1

3. Number Triangles

4. Formatting Variants

5. Complexity Intuition

6. Alphabet Bounds Labs

Advantages

1. Instant Visual Feedback

2. Minimal Concepts

3. Easy to Adapt

4. O(1) Extra Memory

Usage Tips

1. Name the Runner

2. Validate prompt() input

3. Increment Per Cell

4. Watch the Alphabet Cap

5. Dry-Run One Small n

Common Pitfalls

1. Resetting code Each Row

2. Incrementing Only Once Per Row

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

4. Blind parseInt(prompt())

5. Ignoring the Z Boundary

Edge Cases

Single letter

Empty pattern

Last full A–Z fit

Past Z

Non-numeric input

Lowercase variant

🎯 Practice Problems

1. Compare with Program 1

2. Number version

3. Stop at Z

4. Odd-length next

Example 1 — Fixed `rows = 5`

🔎 Worked Walkthrough — `rows = 5`

1. Resetting `code` Each Row