Alphabet Diamond (A to E to A, Widening Rows) in JavaScript

Beginner

⏱️ 9 min read

📚 Updated: Aug 2026

🎯 3 Code Examples

🚀 Live Preview

Top & Bottom

Alphabet diamond A B B C C pattern mirrored in JavaScript programming

Overview

What You’ll Learn

An alphabet diamond mirrors the widening rows from Program 33: apex A, then B B, C C, up to the widest row E E, then the same rows in reverse down to A. The top half uses for (r = 0; r < rows; r++); the bottom half uses for (r = rows - 2; r >= 0; r--) so the widest row is not printed twice. Total lines: 2*rows - 1. This is the final program in the alphabet pattern series - next up: JavaScript Number Pattern Programs. Includes live preview, worked JavaScript examples, edge cases, and complexity.

Top Half

for (r = 0; r < rows; r++)

Same widening row rule as Program 33 - r = 0 .. rows-1.

Bottom Half

r = rows-2 .. 0

Mirror rows downward starting at rows - 2 - skips the widest row already printed.

Row Letter

String.fromCharCode(base + r)

ch = String.fromCharCode(base + r) picks the row letter - A on row 0, E on row 4 for half height 5.

Growing Gap

2*r - 1

if r > 0: print (2 * r - 1) gap spaces and the same letter again - row 0 stays a single A.

Live Preview

1–26 half height

Pick half height and draw the full alphabet diamond in the browser instantly.

2*rows - 1

Total lines

Half height rows=5 prints 9 lines; widest row appears once - O(n²) time, O(1) extra memory.

Introduction

An alphabet diamond combines the widening rows from Program 33 into a full symmetric shape: grow from centered A to the widest letter row, then shrink back to A without repeating the middle line. Row 0 prints a single A; each next row steps to the next letter - B B, C C, until the widest row, then the mirror runs in reverse.

In JavaScript you solve it with two loops sharing the same row logic: top half for (let r = 0; r < rows; r++), bottom half for (let r = rows - 2; r >= 0; r--) - or extract a printRow(r) function to DRY both passes.

Why it matters?

It closes the alphabet pattern series by stacking Program 33’s top half with a mirrored bottom half - the same two-loop diamond pattern used in number diamonds, hollow pyramids, and symmetric ASCII art. After this, continue to JavaScript Number Pattern Programs.

Key Highlights

Leading Spaces

" " * (rows - 1 - r) - row 0 gets rows - 1 spaces; bottom row gets none.

Top Half

for (let r = 0; r < rows; r++) - identical row rule to Program 33.

Bottom Half

for (let r = rows - 2; r >= 0; r--) - mirror without repeating the widest row.

Total Lines

2*rows - 1 output lines for half height rows - widest row printed once.

In short: set base = "A".charCodeAt(0), print top half with for (let r = 0; r < rows; r++), bottom half with for (let r = rows - 2; r >= 0; r--), using the same row rule - leading spaces, letter, optional gap and mirror - on every row.

Foundation

📝 Problem & Approach

Given a positive integer rows (half height), print a centered alphabet diamond of 2*rows - 1 lines. Row r prints (rows - 1 - r) leading spaces, then letter String.fromCharCode("A".charCodeAt(0) + r). For r > 0, print (2*r - 1) gap spaces and the same letter again. Top half: r = 0 .. rows-1. Bottom half: r = rows-2 .. 0.

JavaScript

// Half height rows = 5 (9 output lines)
    A
   B B
  C   C
 D     D
E       E
 D     D
  C   C
   B B
    A

Inputs & Outputs

Item	Type	Description
`rows`	int	Half height - apex to widest row (row letter runs A through the rows-th letter). Clamp to 1–26 for A–Z demos.
Printed output	text	Full alphabet diamond: `2*rows - 1` lines - widening rows up, then mirrored down without duplicating the widest row.

Minimal workflow

Pseudocode

base = "A".charCodeAt(0)
for r from 0 to rows-1:          // top half
    printRow(r)
for r from rows-2 down to 0:     // bottom half
    printRow(r)

printRow(r):
    append (rows-1-r) leading spaces
    ch = String.fromCharCode(base + r)
    append ch
    if r > 0: append (2*r-1) gap spaces and ch
    console.log(line)

Approach comparison

Approach	Idea	Best for
Two loops (inline row logic)	Top `for (r = 0; r < rows; r++)`, bottom `for (r = rows-2; r >= 0; r--)` with duplicated print steps	Learning how diamond halves connect
`printRow(r)` function	Extract shared row logic; call from both loops	Cleaner code and easier testing
Program 33 contrast	See Program 33 (top half only)	Understand what the diamond adds - the bottom mirror loop

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Leading spaces	`line += " ".repeat(rows - 1 - r)`
Top half loop	`for (let r = 0; r < rows; r++)`
Bottom half loop	`for (let r = rows - 2; r >= 0; r--)`
Total output lines	`2 * rows - 1`
Row letter	`ch = String.fromCharCode(base + r)`
Gap spaces (r > 0)	`line += " ".repeat(2 * r - 1)`
Row 0 guard	`if r > 0:` before gap and mirror
printRow helper	`function printRow(r) { ...` called from both loops

Compare

📋 Top Half vs Bottom Half vs printRow Function

Three ways to think about the diamond - the top grows, the bottom mirrors, and a helper DRYs both.

Top half

for (r = 0; r < rows; r++)
r = 0 .. rows-1

Identical to Program 33 - widening rows from A to the widest letter.

Bottom half

for (r = rows-2; r >= 0; r--)
r = rows-2 .. 0

Mirrors rows downward - starts at rows - 2 so the widest row is not printed twice.

printRow(r)

function printRow(r) {
  same row logic

Extract shared logic - leading spaces, letter, gap, mirror - and call from both loops.

Pitfall

for (r = rows-1; r >= 0; r--)
duplicates widest

Starting bottom at rows - 1 prints the widest row twice - use rows - 2 instead.

Context

When This Pattern Shows Up

Reach for alphabet diamonds when closing Program 33’s triangle into a full symmetric shape - the capstone of the alphabet pattern series.

After Program 33
Program 33 prints the top half only. This program adds the bottom mirror loop to close the diamond.
Two-loop diamond pattern
Classic grow-then-shrink structure reused in number diamonds, star diamonds, and hollow pyramids.
Series finale
Last alphabet pattern program - next section is JavaScript Number Pattern Programs.
DRY with printRow
Extract shared row logic into a function - both halves call the same helper.
Not a UI layout tool
This is a console teaching pattern - not how you build modern app screens.

Key benefit: one program that combines Program 33’s widening rows with a mirrored bottom half - the same two-loop diamond pattern used in number patterns, hollow pyramids, and symmetric ASCII art throughout the series.

Interactive

🔮 Live Preview

Choose half height between 1 and 26 and draw the full alphabet diamond in the browser.

Hands-On

Examples Gallery

Three complete JavaScript programs - fixed half height with top and bottom loops, prompt input, and a printRow helper that DRYs both halves. Click View Output to reveal sample console results, or Try it Yourself to run in the browser editor.

📚 Getting Started

Print a full alphabet diamond with half height 5 - top half then bottom mirror.

Example 1 — Fixed `rows = 5` (half height)

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

JavaScript

let rows = 5;
rows = Math.max(1, Math.min(rows, 26));

const base = "A".charCodeAt(0);

// Top half: r = 0 .. rows-1
for (let r = 0; r < rows; r++) {
  let line = "";
  line += " ".repeat(rows - 1 - r);
  const ch = String.fromCharCode(base + r);
  line += ch;
  if (r > 0) {
    line += " ".repeat(2 * r - 1);
    line += ch;
  }
  console.log(line);
}

// Bottom half: mirror without repeating the widest row
for (let r = rows - 2; r >= 0; r--) {
  let line = "";
  line += " ".repeat(rows - 1 - r);
  const ch = String.fromCharCode(base + r);
  line += ch;
  if (r > 0) {
    line += " ".repeat(2 * r - 1);
    line += ch;
  }
  console.log(line);
}

Try it Yourself

How It Works

The first loop walks r from 0 to 4 - identical to Program 33. The second loop walks r from 3 down to 0, reusing the same row logic without printing the widest row (E E) again. Total output: 2*5 - 1 = 9 lines.

📈 Practical Variant

Let the user choose half height at runtime.

Example 2 — User Input Version

Read half height and clamp to 1–26. Validate parseInt(prompt(), 10) with Number.isFinite in real apps.

JavaScript

let rows = parseInt(prompt("Enter number of rows (half height, max 26):"), 10);
if (!Number.isFinite(rows)) {
  console.log("Please enter a whole number.");
} else {
  rows = Math.max(1, Math.min(rows, 26));

  const base = "A".charCodeAt(0);

  for (let r = 0; r < rows; r++) {
    let line = "";
    line += " ".repeat(rows - 1 - r);
    const ch = String.fromCharCode(base + r);
    line += ch;
    if (r > 0) {
      line += " ".repeat(2 * r - 1);
      line += ch;
    }
    console.log(line);
  }

  for (let r = rows - 2; r >= 0; r--) {
    let line = "";
    line += " ".repeat(rows - 1 - r);
    const ch = String.fromCharCode(base + r);
    line += ch;
    if (r > 0) {
      line += " ".repeat(2 * r - 1);
      line += ch;
    }
    console.log(line);
  }
}

Try it Yourself

How It Works

Same diamond core as Example 1; only half height comes from prompt. Three half-height rows produce 5 output lines: top 3 widening rows plus bottom 2 mirrored rows (starting at r = 1).

⚡ printRow Helper

Extract shared row logic into a function - both loops call the same helper.

Example 3 — `printRow(r)` Function Variant

DRY the two loops by extracting identical row logic into one function.

JavaScript

let rows = 5;
rows = Math.max(1, Math.min(rows, 26));

const base = "A".charCodeAt(0);

function printRow(r) {
  let line = "";
  line += " ".repeat(rows - 1 - r);
  const ch = String.fromCharCode(base + r);
  line += ch;
  if (r > 0) {
    line += " ".repeat(2 * r - 1);
    line += ch;
  }
  console.log(line);
}

for (let r = 0; r < rows; r++) {
  printRow(r);
}
for (let r = rows - 2; r >= 0; r--) {
  printRow(r);
}

Try it Yourself

How It Works

printRow(r) encapsulates leading spaces, letter, gap, and mirror - both loops simply call it with different r ranges. Produces identical output to Examples 1 and 2, but easier to test and maintain.

🧠 How the Algorithm Prints the Diamond

Set up bounds

Clamp rows (half height), then set base = "A".charCodeAt(0) for the alphabet starting point.

base / rows

Top half loop

for (let r = 0; r < rows; r++) - same widening row rule as Program 33.

Grow

Bottom half loop

for (let r = rows - 2; r >= 0; r--) - mirror rows without repeating the widest line.

Shrink

Shared row logic

Each row: leading spaces, letter, if r > 0 gap and mirror - extract as printRow(r) to DRY both loops.

Row

Diamond complete

2*rows - 1 output lines for half height rows - O(n²) time, O(1) extra memory (loop version).

Trace

🔎 Worked Walkthrough — `rows = 5` (half height)

Trace each value of r through top and bottom phases - top r = 0..4 matches Program 33; bottom starts at r = 3, 2, 1, 0.

phase	`r`	letter	full row
top	0	`A`	`A`
top	1	`B`	`B B`
top	2	`C`	`C C`
top	3	`D`	`D D`
top	4	`E`	`E E`
bottom	3	`D`	`D D`
bottom	2	`C`	`C C`
bottom	1	`B`	`B B`
bottom	0	`A`	`A`

Highlight: top r = 0..4 is identical to Program 33. Bottom starts at r = 3 (rows - 2), not r = 4 - starting at rows - 1 would duplicate the widest row E E. Total: 9 lines = 2*5 - 1.

Use Cases

Where alphabet diamonds show up - closing the alphabet pattern series before number patterns.

1. After Program 33

Program 33 is the top half only. This program adds the bottom mirror to close the diamond.

Example: run Program 33 output, then append rows for r = rows-2 .. 0.

2. Series finale

Last program in the alphabet pattern series - next up is JavaScript Number Pattern Programs.

Example: compare this diamond with number diamond patterns in the next section.

3. printRow DRY pattern

Extract shared row logic - both halves call the same function with different r ranges.

Example: test printRow(2) in isolation before wiring both loops.

4. Avoid widest-row duplicate

Bottom loop must start at rows - 2, not rows - 1.

Example: for rows=5, bottom starts at r=3 - skipping r=4 prevents double E E.

5. Complexity intuition

2*rows - 1 lines with O(n) chars each - O(n²) total.

Example: half height 5 → 9 output lines, not 10.

6. Interview warm-up

Classic two-loop diamond question - explain why bottom starts at rows-2.

Example: explain half height vs total lines without running code.

Pro Tip: say “top half Program 33, bottom half rows-2 down to 0” before coding - that story prevents duplicating the widest row.

Advantages

Why this pattern earns a spot as the alphabet pattern series finale.

1. Closes Program 33
Top half is Program 33; bottom half completes the symmetric diamond.
2. Two-Loop Diamond
Classic grow-then-shrink structure reused across number and star patterns.
3. printRow DRY
Function extraction keeps both halves readable and testable.
4. O(1) Extra Memory
Streaming output needs no storage beyond loop counters.

Pro Tip: when bottom loop starts at rows - 1, you get two widest rows - start at rows - 2 instead.

Usage Tips

Small habits that keep alphabet diamond code clean.

1. Bottom starts at rows-2
for (r = rows - 2; r >= 0; r--) - never rows - 1 or the widest row prints twice.
2. Extract printRow early
Both loops share identical logic - a helper prevents copy-paste bugs.
3. Clamp rows early
rows = Math.max(1, Math.min(rows, 26)) keeps demos inside A–Z.
4. Guard row 0 separately
if r > 0: must wrap gap and mirror - never print a second A on row 0.
5. Dry-run half height = 3
Trace 5 output lines: top A, B B, C C plus bottom B B, A.

Pro Tip: if gaps look too narrow, check the formula - it should be 2*r - 1, not 2*r.

Common Pitfalls

Mistakes that commonly break alphabet diamonds.

1. Bottom loop starting at rows-1
Using for (let r = rows - 1; r >= 0; r--) duplicates the widest row - you get two middle lines.
→ Start bottom at rows - 2: for (let r = rows - 2; r >= 0; r--)
2. Printing second letter on r=0
Forgetting if r > 0 prints A A on row 0 - two letters at the apex.
→ Wrap gap and mirror in if r > 0: so row 0 prints only one A.
3. Wrong gap formula
Using 2*r instead of 2*r - 1 makes gaps one space too wide starting at row 1.
→ Use 2*r - 1 for the gap - row 1 needs 1 space, row 4 needs 7.
4. Wrong leading spaces
Using r lead spaces or rows - r misaligns the triangle - rows lean or over-indent.
→ Use rows - 1 - r leading spaces so row 0 gets the most padding.
5. Confusing half height with total lines
Expecting 2*rows output lines instead of 2*rows - 1 - the widest row appears once.
→ Half height rows=5 prints 9 lines, not 10.

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single letter

Output is just A - one line diamond; bottom loop for (r = -1; r >= 0; r--) never runs.

rows = 0

Empty pattern

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

rows = 26

Full alphabet

26 half height with letter Z at widest row - 51 total output lines.

rows > 26

Past Z

Clamp to 26 or define a wrap/error policy before printing.

Bad input

Non-numeric input

Use Number.isFinite before clamping rows.

Case

Lowercase variant

Same loops work with base = "a".charCodeAt(0) and lowercase output.

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Compare with Program 33

Program 33: top half only (5 lines for rows=5)
This pattern: top + bottom mirror (9 lines)
See Program 33

2. Implement printRow variant

Rewrite Example 1 using printRow(r) from Example 3
Verify identical output for half height 5

3. Trace bottom loop range

For rows=5, list bottom r values: 3, 2, 1, 0
Explain why r=4 is skipped

4. Continue to Number Patterns

Next section - JavaScript Number Pattern Programs
Apply the same two-loop diamond idea with numbers
See Number Patterns Hub

Important

Notes

Total lines. Half height rows produces 2*rows - 1 output lines - widest row printed once.
Bottom loop: for (r = rows - 2; r >= 0; r--) - starting at rows - 1 duplicates the widest row.
printRow(r) is equivalent to inline row logic - use whichever fits your lesson.
This closes the alphabet pattern series - compare top half with Program 33, then continue to Number Patterns.

Quick Takeaway: top half for (r = 0; r < rows; r++), bottom half for (r = rows - 2; r >= 0; r--), same row rule on every line - that is the whole alphabet diamond.

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Two loops inline (Examples 1–2)	`O(rows²)`	`O(1)`
printRow function (Example 3)	`O(rows²)`	`O(1)` - function call overhead only

Wrap Up

🎉 Conclusion

The alphabet diamond combines Program 33’s widening top half with a mirrored bottom half - two loops, one row rule, 2*rows - 1 total lines. Master the inline two-loop version, then try the printRow(r) helper for cleaner code.

This closes the alphabet pattern series. Practice the three examples above, then continue to JavaScript Number Pattern Programs.

Top half for (r = 0; r < rows; r++), bottom half for (r = rows - 2; r >= 0; r--), guard row 0 with if r > 0, clamp rows to 26, and compare with Program 33 (widening triangle).

View Examples Gallery Continue to Number Patterns

Pro Tips

💡 Best Practices

✅ Do

Set base = "A".charCodeAt(0), clamp half height rows to 1–26
Top half: for (let r = 0; r < rows; r++) with Program 33 row logic
Bottom half: for (let r = rows - 2; r >= 0; r--)
Guard row 0: if r > 0: gap 2*r-1 and mirror ch
Compare with Program 33 to see top half only
Extract printRow(r) to DRY both loops

❌ Don’t

Start bottom at rows - 1 - duplicates widest row
Print gap + mirror on r=0 - produces A A at apex
Confuse half height with total lines - use 2*rows - 1
Hardcode ASCII 65 instead of "A".charCodeAt(0)
Use 2*r for gap - gaps one space too wide
Let rows exceed 26 without a defined policy

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this alphabet diamond

Print the full diamond the beginner-friendly way - last program in the alphabet pattern series.

Core concepts

▽ 01

Top half

for (r = 0; r < rows; r++)

Grow

Bottom half

for (r = rows-2; r >= 0; r--)

Shrink

↑A 03

Total lines

2*rows - 1

Count

↓A 04

printRow

DRY both loops

Code

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

What is an alphabet diamond in JavaScript?

An alphabet diamond prints widening mirrored letter rows from A up to the middle letter, then mirrors back down to A without repeating the widest row. For half height rows=5 you get 9 output lines: A, B B, ... E E, ... A.

Why does the bottom half start at rows-2?

The top half loop already printed the widest row at r=rows-1. Starting the bottom at rows-2 avoids duplicating that middle line - same idea as starting a descend loop at peak-1 in palindrome pyramids.

How does this relate to Program 33?

Program 33 prints only the top half (widening alphabet triangle). Program 34 runs the same printRow logic twice: for (r = 0; r < rows; r++) for the top, then for (r = rows-2; r >= 0; r--) for the bottom mirror.

What is half height vs total output lines?

rows is half height (apex to widest row). Total printed lines are 2*rows - 1 because the widest row appears once. For rows=5 you print 9 lines, not 10.

Why extract a printRow(r) function?

Both halves use identical row logic - leading spaces, letter, optional gap, mirror letter. A printRow helper DRYs the code and makes the two-loop structure easier to read and test.

Why clamp rows to 26?

Each row letter is String.fromCharCode('A'.charCodeAt(0) + r). With rows > 26 you would need characters beyond Z unless you define a wrap or error policy.

What is the time complexity?

O(n^2) where n is half height. About 2n-1 rows each print O(n) characters in the worst case; the total character count grows quadratically.

How should I read the row count safely?

Use parseInt(prompt(), 10) and check Number.isFinite, then clamp rows between 1 and 26.

Did you Know? 🔊

The top half uses r = 0 .. rows-1 with the same row rule as Program 33. The bottom half reuses that logic for r = rows-2 .. 0 so the widest row is not printed twice. Total output lines: 2*rows - 1.

Continue to JavaScript Number Pattern Programs

You've completed the alphabet pattern series - next up: number patterns with the same diamond and pyramid ideas.

Number Patterns →

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 33 - Widening Alphabet Triangle JavaScript Number Pattern Programs

Alphabet Diamond (A to E to A, Widening Rows) in JavaScript

What You’ll Learn

Top Half

Bottom Half

Row Letter

Growing Gap

Live Preview

2*rows - 1

Introduction

Why it matters?

Leading Spaces

Top Half

Bottom Half

Total Lines

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 Top Half vs Bottom Half vs printRow Function

When This Pattern Shows Up

After Program 33

Two-loop diamond pattern

Series finale

DRY with printRow

Not a UI layout tool

🔮 Live Preview

Examples Gallery

📚 Getting Started

Example 1 — Fixed rows = 5 (half height)

How It Works

📈 Practical Variant

Example 2 — User Input Version

How It Works

⚡ printRow Helper

Example 3 — printRow(r) Function Variant

How It Works

🧠 How the Algorithm Prints the Diamond

Set up bounds

Top half loop

Bottom half loop

Shared row logic

Diamond complete

🔎 Worked Walkthrough — rows = 5 (half height)

Use Cases

1. After Program 33

2. Series finale

3. printRow DRY pattern

4. Avoid widest-row duplicate

5. Complexity intuition

6. Interview warm-up

Advantages

1. Closes Program 33

2. Two-Loop Diamond

3. printRow DRY

4. O(1) Extra Memory

Usage Tips

1. Bottom starts at rows-2

2. Extract printRow early

3. Clamp rows early

4. Guard row 0 separately

5. Dry-run half height = 3

Common Pitfalls

1. Bottom loop starting at rows-1

2. Printing second letter on r=0

3. Wrong gap formula

4. Wrong leading spaces

5. Confusing half height with total lines

Edge Cases

Single letter

Empty pattern

Full alphabet

Past Z

Non-numeric input

Lowercase variant

🎯 Practice Problems

1. Compare with Program 33

2. Implement printRow variant

3. Trace bottom loop range

4. Continue to Number Patterns

Example 1 — Fixed `rows = 5` (half height)

Example 3 — `printRow(r)` Function Variant

🔎 Worked Walkthrough — `rows = 5` (half height)