Symmetric Alphabet, Star Center in JavaScript

Beginner

⏱️ 8 min read

📚 Updated: Aug 2026

🎯 3 Code Examples

🚀 Live Preview

Nested Loops

Symmetric alphabet pattern with stars between mirrored halves in JavaScript programming

Overview

What You’ll Learn

Build rows that mirror letters from both ends, while * fills the center gap as the letter half shortens. For top = 'E', the output begins with ABCDEEDCBA and ends with A********A. Includes a live preview, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Left | stars | right

Each row: A..end, then even stars, then end..A.

Outer Loop

End letter countdown

for (let i = top; i >= base; i--) picks the letter half end.

Three Parts

Prefix, gap, mirror

Print left letters, 2*(top - i) stars, then mirrored letters.

Fixed Width

2n chars / row

Every row stays the same length as letters shrink and stars grow.

Live Preview

1–13 rows

Pick a row count and draw the symmetric star-center pattern in the browser.

O(n²)

Complexity

n rows × 2n chars = O(n²); extra memory stays O(1).

Introduction

A symmetric alphabet pattern with a star center keeps a fixed row width while swapping letter space for stars. The left half shrinks from A..top toward A, the center grows with an even number of * characters, and the right half mirrors the left.

In JavaScript you usually solve it with an outer countdown plus three inner loops (or a string shortcut for the stars): left letters, stars, then mirrored letters, then console.log(line).

Why it matters?

It is a classic multi-part row exercise: prefix, gap, and mirror. Once that clicks, hollow diamonds, butterfly patterns, and other fixed-width symmetric shapes become much easier.

Key Highlights

Three Segments

Left letters, center stars, right mirror.

Even Star Gap

Stars = 2*(top - i) — always even.

Constant Width

Every row has exactly 2n characters.

Double Middle

First row doubles the peak letter when stars = 0.

In short: for each end letter i from top down to A, print A..i, then 2*(top-i) stars, then i..A, then break the line.

Foundation

📝 Problem & Approach

Given a positive integer rows (or a fixed top letter like 'E'), print a fixed-width symmetric pattern of alphabet halves with a growing star center.

JavaScript

# First 5 rows (conceptual shape)
# ABCDEEDCBA
# ABCD**DCBA
# ABC****CBA
# AB******BA
# A********A

Inputs & Outputs

Item	Type	Description
`rows`	int	Number of lines (typically 1–26). Top letter = `"A".charCodeAt(0) + rows - 1`.
Printed output	text	Each row has width `2*rows`: left letters + even stars + mirrored letters.

Minimal workflow

Pseudocode

top = 'E'
for i from top down to 'A':
    line = ""
    for j from 'A' to i: line += String.fromCharCode(j)
    stars = 2 * (top - i)
    for s from 1 to stars: line += "*"
    for m from i down to 'A': line += String.fromCharCode(m)
    console.log(line)

Approach comparison

Approach	Idea	Best for
Three nested loops	Left + stars + right explicitly	Learning and interviews
`"*".repeat(stars)`	Build the gap in one call	Shorter production-style demos

Cheat Sheet

⚡ Quick Reference

Goal	Pattern
Walk row ends	`for (let i = top; i >= base; i--)`
Left half	`for (let j = base; j <= i; j++) line += String.fromCharCode(j)`
Star gap	`stars = 2 * (top - i)`
Right half	`for (let m = i; m >= base; m--) line += String.fromCharCode(m)`
Star shortcut	`line += "*".repeat(stars)`
End the row	`console.log(line)`

Compare

📋 line += vs Stars vs Mirror

Same row — three roles that must stay in order.

Left +=

A..i

Ascending prefix for this row’s end letter

Center stars

2*(top-i)

Even gap that grows as letters shrink

Right +=

i..A

Descending mirror of the left half

console.log

new line

Call console.log(line) only after all three parts finish

Context

When This Pattern Shows Up

Reach for this shape when practicing multi-part fixed-width rows.

After simpler triangles
Combine ascending, descending, and fill in one row.
Center-gap drills
Same idea as hollow stars: letters shrink, filler grows.
Symmetry checks
Visual test that left and right halves stay mirrors.
Gateway to Program 16
Next: centered alphabet pyramids with leading spaces.
Not a UI layout tool
This is a console teaching pattern — not how you build modern app screens.

Key benefit: one program that locks in prefix + gap + mirror thinking while keeping row width constant.

Interactive

🔮 Live Preview

Choose a row count between 1 and 13 and draw the symmetric alphabet / star-center pattern in the browser.

Hands-On

Examples Gallery

Three complete JavaScript programs - fixed top letter, prompt for row count, and a "*".repeat(stars) 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 three explicit inner loops.

Example 1 — Fixed `top = 'E'`

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

JavaScript

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

for (let i = top; i >= base; i--) {
  let line = "";
  for (let j = base; j <= i; j++) {
    line += String.fromCharCode(j);
  }

  const stars = 2 * (top - i);
  for (let s = 0; s < stars; s++) {
    line += "*";
  }

  for (let m = i; m >= base; m--) {
    line += String.fromCharCode(m);
  }

  console.log(line);
}

Try it Yourself

How It Works

When i is E, left builds ABCDE, stars = 0, right builds EDCBA → ABCDEEDCBA. As i decreases, the letter halves shrink and the even star gap grows, keeping each row width at 2n.

📈 Practical Variant

Let the user choose how many rows to print.

Example 2 — Row Count Input

Read rows, clamp to 1-26, then set top = base + rows - 1.

JavaScript

let rows = parseInt(prompt("Enter the number of rows:"), 10);
if (!Number.isFinite(rows)) rows = 5;
rows = Math.max(1, Math.min(rows, 26));
const base = "A".charCodeAt(0);
const top = base + rows - 1;

for (let i = top; i >= base; i--) {
  let line = "";
  for (let j = base; j <= i; j++) {
    line += String.fromCharCode(j);
  }

  const stars = 2 * (top - i);
  for (let s = 0; s < stars; s++) {
    line += "*";
  }

  for (let m = i; m >= base; m--) {
    line += String.fromCharCode(m);
  }

  console.log(line);
}

Try it Yourself

How It Works

Same three-part row builder as Example 1; only top is derived from the row count. Validate with Number.isFinite and clamp so top stays within A-Z.

⚡ Star Shortcut

Fill the center gap with "*".repeat(stars) instead of a star loop.

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

Same shape as Example 1 with a shorter center fill.

JavaScript

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

for (let i = top; i >= base; i--) {
  let line = "";
  for (let j = base; j <= i; j++) {
    line += String.fromCharCode(j);
  }

  const stars = 2 * (top - i);
  line += "*".repeat(stars);

  for (let m = i; m >= base; m--) {
    line += String.fromCharCode(m);
  }

  console.log(line);
}

Try it Yourself

How It Works

"*".repeat(stars) builds the entire center gap in one call. Nested star loops are fine for learning; repeat is a handy shortcut later.

🧠 How the Algorithm Prints Rows

Set up

Use prompt() when reading input. Fix top or compute it from rows.

Setup

Outer loop (end letter)

i goes from top down to base ('A') — that is the letter half end.

E → A

Left + stars

Append A..i, then 2*(top - i) stars for the center gap.

Prefix + gap

Mirror + break

Print i..A, then console.log(line) to end the fixed-width row.

Mirror

Pattern complete

n rows × 2n characters = O(n²) time, O(1) extra memory.

Trace

🔎 Worked Walkthrough — `top = 'E'`

Trace each outer-loop value of i and check left, stars, and right.

`i`	Left	Stars	Right	Full row
`'E'`	`ABCDE`	0	`EDCBA`	`ABCDEEDCBA`
`'D'`	`ABCD`	2	`DCBA`	`ABCD**DCBA`
`'C'`	`ABC`	4	`CBA`	`ABC****CBA`
`'B'`	`AB`	6	`BA`	`AB******BA`
`'A'`	`A`	8	`A`	`A********A`

Every row has length 10 = 2×5. Total characters: 5×10 = 50.

Use Cases

Where this multi-part row pattern shows up beyond the homework prompt.

1. Multi-Part Rows

Clearest demo that one row can be several loops in sequence.

Example: omit the right half and watch symmetry break.

2. Fixed-Width Shapes

Letters shrink while filler grows so width stays constant.

Example: count chars on every row — always 2n.

3. Mirror Practice

Ascending then descending loops over the same end letter.

Example: swap right loop direction and break the palindrome.

4. Fill-Character Variants

Swap * for #, spaces, or digits once the structure works.

Example: use string multiplication("#", stars).

5. Complexity Intuition

Constant-width rows make O(n²) obvious: n × 2n prints.

Example: n = 10 → 200 characters.

6. Input Validation Labs

Pair with Number.isFinite and 1–26 clamps for A–Z.

Example: reject rows > 26.

Pro Tip: say “left, gap, right” before coding — that story prevents forgetting the mirror half or misplacing console.log(line).

Advantages

Why this pattern earns a spot after simpler alphabet triangles.

1. Instant Visual Feedback
Wrong star count or missing mirror shows up immediately as broken symmetry.
2. Composable Skills
Reuses ascending loops, descending loops, and fill loops together.
3. Easy to Customize
Change the fill character or skip the doubled middle with small edits.
4. Clear Complexity Story
Fixed width 2n makes O(n²) easy to explain in interviews.

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

Usage Tips

Small habits that keep symmetric star-center code clean.

1. Name the Three Parts
Comment or structure code as left / stars / right so the order stays obvious.
2. Validate parseInt(prompt()) with Number.isFinite
Avoid crashes when the user types letters instead of a number.
3. Keep console.log(line) Last
Only call console.log(line) after left, stars, and right all finish.
4. Use Even Star Counts
Stick to 2*(top - i) so the gap stays even and centered.
5. Dry-Run One Small n
Trace rows = 3 (ABCCBA / AB**BA / A****A) on paper first.

Pro Tip: if the first row is ABCDEDCBA (one E), you started the right half at i - 1 — fine as a variant, but not this page’s default.

Common Pitfalls

Mistakes that commonly break symmetric star-center patterns.

1. Forgetting the Mirror Half
You get only left letters and stars — no symmetry.
→ Always print i..A after the star gap.
2. Wrong Star Formula
Using top - i (not doubled) misaligns the center and shrinks the width.
→ Keep stars = 2 * (top - i).
3. console.log(line) Too Early
Breaking after the left half splits one logical row into three lines.
→ Call console.log(line) only after left + stars + right.
4. Blind parseInt(prompt())
Letters or empty input need validation — cast carefully.
→ Validate parseInt(prompt()) with Number.isFinite and clamp the range.
5. Reversing the Left Half
Printing the left side descending changes the intended pattern.
→ Left is always ascending A..i; right is descending i..A.

Edge Cases

Check these inputs before calling the solution done.

rows = 1

Single doubled letter

Output is AA (left A + right A, zero stars).

rows = 0

Empty pattern

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

First row

Doubled peak

Expect ...EE... style middle when stars = 0.

rows > 26

Past Z

Clamp or error — char math leaves A–Z.

Bad input

Non-numeric input

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

Fill char

Not only `*`

Same structure works with #, spaces, or digits.

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Single middle letter

Start right half at i - 1 when stars = 0
First row becomes ABCDEDCBA

2. Change the fill

Use # or spaces instead of *
Keep the 2*(top-i) count

3. Safe input loop

Validate with Number.isFinite and clamp to 1 <= rows <= 26
Then draw the pattern

4. Continue to Program 16

Centered alphabet pyramid next
See Program 16

Important

Notes

Fixed width. Each row has 2n characters; total work is 2n² — O(n²).
Star count must be 2*(top - i) for this centered even gap.
First row doubles the peak letter because left ends at i and right starts at i.
Validate 1 <= rows <= 26 for interactive A–Z programs.

Quick Takeaway: left A..i, even star gap, right i..A, then break the line — that is the whole pattern.

Analysis

⏱️ Time and Space Complexity

Program	Time	Extra space
Three loops (Examples 1–2)	`O(n²)`	`O(1)`
`"*".repeat(stars)` (Example 3)	`O(n²)`	`O(n)` temporary gap string per row

Each of the n rows prints exactly 2n characters, so total prints are 2n².

Wrap Up

🎉 Conclusion

The symmetric alphabet / star-center pattern is a multi-part nested-loop exercise with lasting payoff: prefix, even gap, and mirror on a fixed-width row. Master the three-loop version, then optionally shorten the star gap with "*".repeat(stars).

Practice the three examples above, then continue to Program 16’s centered alphabet pyramid.

Print left, then 2*(top - i) stars, then the mirror — and call console.log(line) only after all three parts.

View Examples Gallery Continue to Program 16

Pro Tips

💡 Best Practices

✅ Do

Structure each row as left / stars / right
Use stars = 2 * (top - i) for an even center
Call console.log(line) only after all three parts
Validate 1 <= rows <= 26 for interactive programs
State O(n²) via n rows × 2n characters

❌ Don’t

Skip the mirrored right half
Use a non-doubled star count for this shape
Break the line between the three parts
Print the left half in reverse
Allow rows > 26 without a clear policy

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this alphabet pattern

Print the symmetric star-center pattern the beginner-friendly way.

Core concepts

△ 01

Rule

Left | stars | right

Definition

↻ 02

Outer loop

End letter top→A

Code

* 03

Star gap

2*(top-i) stars

Code

↵ 04

console.log(line)

After all three parts

I/O

O 05

Complexity

O(n²) time

Analysis

❓ Frequently Asked Questions

Why does the first row contain two E letters in the middle?

The left half appends A..E, and the right half appends E..A. When there are zero stars on the first row, E appears as the last character of the left half and the first character of the right half.

How many stars are printed on each row?

Stars per row are 2*(top - end) using letter codes. For top=E: 0, 2, 4, 6, 8 stars as end goes E, D, C, B, A.

Why is the star count always even?

Because it is computed as 2*(top - i), which is always a multiple of 2.

Can I remove the duplicate middle letter?

Yes. You can start the right half from i - 1 instead of i when there are zero stars, so the first row becomes ABCDEDCBA.

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

line += String.fromCharCode(j) builds the full row string. console.log() inside the inner loop would log one character per line. Log once after left, stars, and right finish.

What is the time complexity?

O(n^2) for n rows. Each row prints a total of 2n characters (letters + stars), repeated across n rows.

Can I use string repeat for the center?

Yes. line += '*'.repeat(stars) fills the whole gap in one call. Nested star loops are fine for learning; '*'.repeat(stars) 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 bad input does not walk past Z.

Did you Know? 🔊

Each row is: ascending letters from A to the row end, then 2*(top - end) stars, then descending letters back to A. The middle letter appears twice when star count is 0, producing ABCDEEDCBA on the first row. Total width stays constant at 2n characters per row.

Continue to Alphabet Pattern 16

Next up: a centered alphabet pyramid with leading spaces and a running letter counter.

Program 16 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 14 - Odd-Length Triangle JavaScript Alphabet Pattern 16 - Centered Pyramid

Symmetric Alphabet, Star Center in JavaScript

What You’ll Learn

Shape Rule

Outer Loop

Three Parts

Fixed Width

Live Preview

O(n²)

Introduction

Why it matters?

Three Segments

Even Star Gap

Constant Width

Double Middle

📝 Problem & Approach

Inputs & Outputs

Minimal workflow

Approach comparison

⚡ Quick Reference

📋 line += vs Stars vs Mirror

When This Pattern Shows Up

After simpler triangles

Center-gap drills

Symmetry checks

Gateway to Program 16

Not a UI layout tool

🔮 Live Preview

Examples Gallery

📚 Getting Started

Example 1 — Fixed top = 'E'

How It Works

📈 Practical Variant

Example 2 — Row Count Input

How It Works

⚡ Star Shortcut

Example 3 — "*".repeat(stars)

How It Works

🧠 How the Algorithm Prints Rows

Set up

Outer loop (end letter)

Left + stars

Mirror + break

Pattern complete

🔎 Worked Walkthrough — top = 'E'

Use Cases

1. Multi-Part Rows

2. Fixed-Width Shapes

3. Mirror Practice

4. Fill-Character Variants

5. Complexity Intuition

6. Input Validation Labs

Advantages

1. Instant Visual Feedback

2. Composable Skills

3. Easy to Customize

4. Clear Complexity Story

Usage Tips

1. Name the Three Parts

2. Validate parseInt(prompt()) with Number.isFinite

3. Keep console.log(line) Last

4. Use Even Star Counts

5. Dry-Run One Small n

Common Pitfalls

1. Forgetting the Mirror Half

2. Wrong Star Formula

3. console.log(line) Too Early

4. Blind parseInt(prompt())

5. Reversing the Left Half

Edge Cases

Single doubled letter

Empty pattern

Doubled peak

Past Z

Non-numeric input

Not only *

🎯 Practice Problems

1. Single middle letter

2. Change the fill

3. Safe input loop

4. Continue to Program 16

Example 1 — Fixed `top = 'E'`

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

🔎 Worked Walkthrough — `top = 'E'`

2. Validate `parseInt(prompt())` with Number.isFinite

Not only `*`