Symmetric Decreasing Alphabet Square in JavaScript

Beginner
⏱️ 9 min read
📚 Updated: Aug 2026
🎯 3 Code Examples
🚀 Live Preview
Nested Loops
Symmetric decreasing alphabet square E through E D C B A B C D E in JavaScript programming
Overview

What You’ll Learn

Stay symmetric by printing a left half (E down to A) and a mirrored right half (B up to E). Each cell follows the same rule: if j > i print the column letter; otherwise print the current row floor i. Compare Program 21 (diamond symmetry) and Program 24 (palindrome triangles). Includes a live preview, worked JavaScript examples, edge cases, and complexity.

Shape Rule

Layered square

Borders stay high; interiors drop toward A.

Two Halves

Mirror

Left E..A, right B..E — A once in the center.

Floor Rule

j > i

Print column letter or row floor letter.

Fixed Width

2k+1

For A..E (k=4), every row has 9 letters.

Live Preview

Top letter

Pick a top letter (A–F) and draw the layers.

O(n²)

Complexity

n rows × O(n) cells each.

Introduction

A symmetric decreasing alphabet square prints fixed-width rows whose outer letters stay high while the interior floor drops from the top letter down to A, mirrored left and right.

In JavaScript you solve it with an alphabet string, a descending row floor, and two column scans that share the same j > i choice rule.

Why it matters?

It teaches mirrored scans, a shared cell rule, and how to keep a single center letter — skills that transfer to concentric squares and Program 29.

Key Highlights

Floor i

Drops E → A each row.

Mirror

Left half + right half.

j > i

Border vs interior choice.

One A

Right half starts at B.

In short: for each floor i from top down to A, scan left k..0 and right 1..k, appending j > i ? alpha[j] : alpha[i], then call console.log(line).

Foundation

📝 Problem & Approach

Given a top letter (or fixed E), print a fixed-width symmetric square whose interior floor drops from the top letter down to A.

JavaScript
// Five rows (space after each letter; width 9)
// E E E E E E E E E
// E D D D D D D D E
// E D C C C C C D E
// E D C B B B C D E
// E D C B A B C D E

Inputs & Outputs

ItemTypeDescription
top / kchar / intTop letter; k = top.charCodeAt(0) - "A".charCodeAt(0) (4 for E). Rows = k+1.
Printed outputtextSymmetric layers of width 2k+1 with a dropping floor.

Minimal workflow

Pseudocode
k = top.charCodeAt(0) - "A".charCodeAt(0)
for i from k down to 0:          // row floor
    line = ""
    for j from k down to 0:      // left half
        line += (j > i ? letter[j] : letter[i]) + " "
    for j from 1 to k:           // right half (skip 0)
        line += (j > i ? letter[j] : letter[i]) + " "
    console.log(line)

Approach comparison

ApproachIdeaBest for
Two mirrored scansLeft k..0 + right 1..k with j>iMatching this classic sample
Distance from centerappend letter by max(dx, dy) styleConcentric / diamond variants
Cheat Sheet

⚡ Quick Reference

GoalPattern
Alphabet + kconst alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const k = 4;
Rowsfor (let i = k; i >= 0; i--)
Left halffor (let j = k; j >= 0; j--) line += (j > i ? alpha[j] : alpha[i]) + " "
Right halffor (let j = 1; j <= k; j++) line += (j > i ? alpha[j] : alpha[i]) + " "
Full diamond nextSee Program 29
Compare

📋 Left vs Right vs Floor Rule

Same row - four roles that build the layered square.

j = k..0
left

Descending half through the center A

j = 1..k
right

Ascending mirror; skips duplicating A

j > i ? j : i
floor

Border letter vs row-floor letter

console.log
break

Ends the row after both halves

Context

When This Pattern Shows Up

Reach for this when teaching mirrored scans and shared cell rules for layered squares.

  1. After simple pyramids

    Step up from prefixes to concentric-style layers.

  2. Mirror + condition drills

    Practice one rule reused on both halves.

  3. Bridge to Program 29

    Same row logic, then mirror upward for a full diamond.

  4. Index practice

    Map letters to array indexes and reuse them safely.

  5. Not a UI layout tool

    This is a console teaching pattern — not how you build modern app screens.

Key benefit: one shared j > i rule on mirrored halves is the cleanest way to build layered alphabet squares without special-casing the center.

Interactive

🔮 Live Preview

Choose a top letter from A to F and draw the symmetric decreasing alphabet square in the browser.

Try E (classic sample) or C (smaller square). Preview allows A–F.

Live result
Press "Draw pattern".
Hands-On

Examples Gallery

Three complete JavaScript programs - fixed A–E, user-chosen top letter, and a helper-function rewrite. Click View Output to reveal sample console results, or Try it Yourself to run in the browser editor.

📚 Getting Started

Print five layered rows from E down to the A-center floor.

Example 1 — Fixed A–E

Two symmetric scans per row with the same j > i check, matching the reference logic.

JavaScript
const k = "E".charCodeAt(0) - "A".charCodeAt(0);
const alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

for (let i = k; i >= 0; i--) {
  let line = "";
  for (let j = k; j >= 0; j--) {
    line += (j > i ? alpha[j] : alpha[i]) + " ";
  }
  for (let j = 1; j <= k; j++) {
    line += (j > i ? alpha[j] : alpha[i]) + " ";
  }
  console.log(line);
}
Try it Yourself

How It Works

When i = 2 (floor C), columns where j > 2 append E/D borders, and interior cells append C. The right half starts at j = 1 so the center A is not duplicated on the last row.

📈 Practical Variant

Let the user pick the top letter (like E).

Example 2 — Top Letter Input

Works for A..top with the same symmetric square. Use prompt().trim().toUpperCase() and validate a single A–Z character in real apps.

JavaScript
let top = prompt("Enter top letter (like E):");
top = (top || "").trim().toUpperCase();
if (top.length !== 1 || !/^[A-Z]$/.test(top)) {
  console.log("Please enter a single letter.");
} else {
  const k = top.charCodeAt(0) - "A".charCodeAt(0);
  const alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  for (let i = k; i >= 0; i--) {
    let line = "";
    for (let j = k; j >= 0; j--) {
      line += (j > i ? alpha[j] : alpha[i]) + " ";
    }
    for (let j = 1; j <= k; j++) {
      line += (j > i ? alpha[j] : alpha[i]) + " ";
    }
    console.log(line);
  }
}
Try it Yourself

How It Works

k = top.charCodeAt(0) - "A".charCodeAt(0) scales both the floor loop and the two halves. Width becomes 2k + 1 (5 letters for top = C).

⚡ Helper Style

Same shape with a shared cell helper for both halves.

Example 3 — Helper Function

Often clearer to read: one function applies the floor rule so left and right loops stay thin.

JavaScript
function cell(alpha, j, i) {
  return (j > i ? alpha[j] : alpha[i]) + " ";
}

const k = "E".charCodeAt(0) - "A".charCodeAt(0);
const alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

for (let i = k; i >= 0; i--) {
  let line = "";
  for (let j = k; j >= 0; j--) {
    line += cell(alpha, j, i);
  }
  for (let j = 1; j <= k; j++) {
    line += cell(alpha, j, i);
  }
  console.log(line);
}
Try it Yourself

How It Works

cell owns the j > i rule once. Left and right loops only decide which columns to visit.

🧠 How the Algorithm Prints Rows

1

Map letters to numeric indices

We store letters in alpha. For A–E, we set k = 4 (index of E). Every printed cell is one of alpha[0..k].

Setup
2

Outer loop drops the floor each row

Row index i runs from k down to 0 (E to A). Smaller i means a deeper inner layer. Think of alpha[i] as the minimum letter allowed in that row.

Rows
3

Left half: E down to A (k..0)

For columns j = k..0, choose with j > i ? alpha[j] : alpha[i]. Borders stay high; interiors drop to the row floor.

Left
4

Right half: B up to E (1..k)

Scan j = 1..k. Starting at 1 (B) avoids appending the center A twice. Total columns: (k+1) + k = 2k + 1 (9 for A–E).

Right
=

Symmetry + layers

Each row is a symmetric layer around the center. As i decreases, the minimum letter moves inward (E → D → C → B → A) — O(n²) time.

Trace

🔎 Worked Walkthrough — Top = E (k = 4)

Trace each row floor and the resulting 9-letter line.

iFloor letterPrinted row
4EE E E E E E E E E
3DE D D D D D D D E
2CE D C C C C C D E
1BE D C B B B C D E
0AE D C B A B C D E

Width is always 2×4+1 = 9. The last row is the full palindrome around a single A.

Use Cases

Where this layered alphabet square shows up beyond the homework prompt.

1. Layer Labs

Clearest demo of borders staying high while interiors drop.

Example: flip j > i to j >= i and watch layers shift.

2. Mirror Practice

Reuse one cell rule on left and right scans.

Example: start the right half at 0 and see a double A.

3. Index Mapping

Practice k = top.charCodeAt(0) - "A".charCodeAt(0) with an alphabet array.

Example: scale from E to H without rewriting loops.

4. Helper Extraction

Factor the floor rule into one method (Example 3).

Example: reuse cell for Program 29 later.

5. Complexity Intuition

Fixed width × n rows makes O(n²) easy to see.

Example: 5 rows × 9 cells = 45 prints.

6. Bridge to Program 29

Reuse this row logic, then mirror upward for a full diamond.

Example: continue to Program 29.

Pro Tip: say “left E..A, right B..E, print max of column and floor” before coding - that story prevents a duplicated center A.

Advantages

Why this pattern earns a spot after simpler pyramids and rotations.

  1. 1. Instant Visual Feedback

    A broken mirror or wrong floor shows up immediately.

  2. 2. One Shared Rule

    Both halves reuse the same j > i choice.

  3. 3. Scales Cleanly

    Change k and the whole square grows.

  4. 4. Reusable for Program 29

    The same row logic becomes half of a full diamond.

Pro Tip: learn the inline ternary version first; extract cell once the floor rule feels automatic.

Usage Tips

Small habits that keep layered alphabet squares clean.

  1. 1. Start the Right Half at 1

    Starting at 0 duplicates the center A.

  2. 2. Keep One Floor Rule

    Reuse j > i ? alpha[j] : alpha[i] on both halves.

  3. 3. Set k from the Top Letter

    Use k = top.charCodeAt(0) - "A".charCodeAt(0) so scaling stays automatic.

  4. 4. Validate Top Letter Input

    Require a single A–Z character; normalize case if needed.

  5. 5. Expect Trailing Spaces

    The sample prints a space after every letter; trim if you need clean ends.

Pro Tip: if the last row shows ... A A B ..., the right half almost certainly started at j = 0.

Common Pitfalls

Mistakes that commonly break symmetric decreasing alphabet squares.

  1. 1. Starting the Right Half at 0

    Duplicates the center A.

    → Start the right scan at j = 1.

  2. 2. Wrong Floor Condition

    Using j >= i or swapping operands changes layer borders.

    → Keep j > i ? alpha[j] : alpha[i].

  3. 3. Mismatched k and Alphabet

    Hard-coding k=4 while changing the alphabet source breaks indexes.

    → Derive k from the chosen top letter.

  4. 4. Blind letter conversion on bad input

    Empty lines or multi-character input break letter logic or use only the first char.

    → Validate a single A–Z letter after trim().toUpperCase().

  5. 5. Ascending Outer Loop by Mistake

    Running i from 0 to k prints layers in reverse order.

    → Descend i from k down to 0.

Edge Cases

Check these inputs before calling the solution done.

top = A

Single letter

Output is just A (right half empty).

top = E

Classic sample

5 rows × width 9 through the A center.

top = C

Smaller square

3 rows × width 5 (Example 2).

Lowercase

Case mismatch

Normalize with .upper() if needed.

Bad input

Empty / multi-char

Validate before calling charCodeAt(0).

Numbers

Same structure

Replace alpha with 5..1 style indexes.

Drill

🎯 Practice Problems

Try these variations to lock in the pattern.

1. Duplicate the center on purpose

  • Start the right half at 0 once
  • Confirm why the sample starts at 1

2. Extract cell

  • Use a helper (Example 3)
  • Keep both halves calling it

3. Scale to H

  • Set top = H and recompute k
  • Check width = 2k+1

4. Continue to Program 29

  • Mirror this square into a full diamond
  • See Program 29
Important

Notes

  • Two halves. Left E..A and right B..E keep a single center A.
  • The floor rule j > i ? alpha[j] : alpha[i] builds borders and interiors together.
  • Row width is always 2k + 1 (9 for A..E).
  • Program 29 reuses this row logic and mirrors it upward for a full diamond.

Quick Takeaway: drop the floor from top to A, print left then right with the same j > i rule, and skip duplicating the center.

Analysis

⏱️ Time and Space Complexity

ProgramTimeExtra space
Inline / input (Examples 1–2)O(n²)O(1) (plus alphabet source)
Helper function (Example 3)O(n²)O(1)

For n letters there are n rows and each row prints O(n) cells (width 2n-1), so total work is O(n²).

Wrap Up

🎉 Conclusion

The symmetric decreasing alphabet square is a small nested-loop exercise with lasting payoff: mirrored halves, a shared floor rule, and a single center A. Master the classic E…A sample, then try user input and the helper rewrite.

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

Drop the floor, print left then right with j > i, start the right half at 1, then break the line.

View Examples Gallery Continue to Program 29
Pro Tips

💡 Best Practices

✅ Do

  • Start the right half at j = 1
  • Reuse one j > i floor rule on both halves
  • Derive k from the top letter
  • Validate a single A–Z top letter for input variants
  • State O(n²) when asked about complexity

❌ Don’t

  • Start the right half at 0 (duplicates A)
  • Hard-code k without updating the alphabet source
  • Ascend the outer floor loop for this sample
  • Skip validating top-letter input
  • Call console.log(line) inside either half loop
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about this alphabet pattern

Print the symmetric decreasing alphabet square the beginner-friendly way.

5
Core concepts
▷ 01

Rule

Mirror + floor

Definition
> 02

Choice

j > i ? j : i

Code
1 03

Right

Start at B

Code
↵ 04

console.log

Ends each row

I/O
O 05

Complexity

O(n²) time

Analysis
🎯 You’re ready to print a symmetric decreasing alphabet square in JavaScript
Review Quick Reference →

❓ Frequently Asked Questions

It appends the border letters when the column index j is above the current row floor i; otherwise it appends i. This builds higher-letter borders with a flat interior.
The first loop scans from k down to 0 (E down to A). The second scans 1 up to k so the middle A is printed once and the row is mirrored.
For letters A..k, width is (k+1) + k = 2*k+1. For A..E (k=4), width is 9.
Pick a larger top letter (like H), set k = top.charCodeAt(0) - 'A'.charCodeAt(0), and keep the same loop structure.
O(n^2) for n letters because there are n rows and each row prints O(n) cells.
Starting at 0 would append alpha[0] (A) again and duplicate the center. Starting at 1 (B) mirrors the left half cleanly.
Read a line with prompt(), trim it, call .toUpperCase(), require a single A-Z character, and reject empty or multi-character input.
Program 29 reuses the same row logic while descending to A, then mirrors upward from B to E so you get a full reverse-centered diamond without duplicating the center row.

Did you Know? 🔊

Fix k at the top letter (E). Outer loop i goes from k down to 0 (A). Left half scans j = k..0; right half scans j = 1..k so A appears once in the middle. Each position appends alpha[j] when j > i, otherwise appends alpha[i].

Continue to Alphabet Pattern 29

Next up: reverse centered alphabet pyramids that reuse this row logic both downward and upward.

Program 29 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.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Alphabet Pattern 27 - Right-Aligned Pyramid JavaScript Alphabet Pattern 29 - Reverse Centered Pyramid