Square Mirror (E..A..E)

Beginner
⏱️ 12 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Two halves per row
JavaScript alphabet pattern 28 output: E E E E E E E E E, E D D D D D D D E, ..., E D C B A B C D E

What You'll Learn

This pattern builds a symmetric square-like output. Each row chooses between the “column letter” and the current row letter based on j > i, then mirrors the same logic on the right side.

⭐ Pattern Output

Output
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
1

Node.js / console version

Build each row with two loops (left half then right half) and print with spaces.

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

for (let i = top; i >= A; i--) {
  let line = "";

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

  console.log(line.trimEnd());
}
Try it Yourself
2

Browser version (document.write + div)

Matches the reference: fixed-width cells so the grid stays aligned.

HTML
<!DOCTYPE html>
<html>
<head>
  <style>
    div.cell {
      display: inline-block;
      text-align: center;
      width: 15px;
    }
  </style>
</head>
<body>
<script>
  const A = 65;
  const top = 69;
  for (let i = top; i >= A; i--) {
    for (let j = top; j >= A; j--) {
      if (j > i) document.write("<div class=\\"cell\\">" + String.fromCharCode(j) + "</div>");
      else document.write("<div class=\\"cell\\">" + String.fromCharCode(i) + "</div>");
    }
    for (let j = A + 1; j <= top; j++) {
      if (j > i) document.write("<div class=\\"cell\\">" + String.fromCharCode(j) + "</div>");
      else document.write("<div class=\\"cell\\">" + String.fromCharCode(i) + "</div>");
    }
    document.write("<br>");
  }
</script>
</body>
</html>
Try it Yourself

🧠 How It Works

1

Core idea

Let top = 'E'. Outer loop sets the current row letter i from E down to A. For each row, we print a left half by scanning j from E..A and a right half by scanning j from B..E. If j > i we print the column letter; otherwise we print the row letter. This creates the symmetric frame E D C B A B C D E on the last row.

Logic
2

Loops + condition

An outer loop picks the row, inner loop(s) decide what to print (letter / star / blank) based on comparisons.

Nested loops
=

Connect it to the output

Compare each loop boundary with the pattern output above — each row corresponds to one outer iteration.

Key Takeaways

1

Two halves per row create symmetry.

2

j > i decides column-letter vs row-letter.

3

Fixed-width cells keep a clean grid in HTML.

4

Time complexity: O(n²).

❓ Frequently Asked Questions

On the first row i = E, so the condition j > i is never true. Every cell prints the row letter E.
On the last row i = A, the condition j > i is true for all columns except A, so you see the outer letters framing the center A.
Change top to a later letter (for example "G".charCodeAt(0)) and update the start values in loops accordingly.

More JavaScript alphabet patterns

Browse the full list for more variations.

Next: Program 29 →
Did you know?

This is similar to a “concentric square” pattern, but built using letters and a mirror instead of numbers.

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)

10 people found this page helpful

JavaScript Alphabet Pattern 27 JavaScript Alphabet Pattern 29