Hollow Diamond Star Pattern in JavaScript

Beginner
⏱️ 12 min read
📚 Updated: Aug 2025
🎯 1 Code Example
upper + lower half
Hollow diamond star pattern output in JavaScript programming

What You'll Learn

This program prints a hollow diamond by combining an inverted V (upper half, Program 7) and a V-shaped hollow pattern (lower half, Program 8).

Upper half: i = 1..rows. Lower half: i = rows - 1..1. Both halves use the same spacing and gap rules.

⭐ Pattern Output

When you run the program with rows = 5:

Output
    *
   * *
  *   *
 *     *
*       *
 *     *
  *   *
   * *
    *
1

Complete JavaScript Program

Fixed rows = 5 version:

JavaScript
const rows = 5;

function printHollowVRow(i, rows) {
  let line = "";
  for (let s = 1; s <= rows - i; s++) line += " ";
  line += "*";

  if (i > 1) {
    for (let g = 1; g <= 2 * i - 3; g++) line += " ";
    line += "*";
  }

  console.log(line);
}

for (let i = 1; i <= rows; i++) {
  printHollowVRow(i, rows);
}
for (let i = rows - 1; i >= 1; i--) {
  printHollowVRow(i, rows);
}
Try it Yourself

🧠 How It Works

1

Shared row helper

function printHollowVRow(i, rows) builds one line: leading spaces, left *, optional 2 * i - 3 spaces and right * when i > 1, then console.log(line). Both halves call this so the geometry never drifts.

DRY
2

Upper half

for (let i = 1; i <= rows; i++) printHollowVRow(i, rows); draws the inverted-V half from apex to widest row (same idea as Program 7).

Upper
3

Lower half (no duplicate middle)

for (let i = rows - 1; i >= 1; i--) printHollowVRow(i, rows); mirrors the upper half. Starting at rows - 1 skips the widest row a second time.

Lower
4

Line count and cost

Total lines: rows + (rows - 1) = 2 * rows - 1. Each line has width 2 * rows - 1. O(n²) output, O(1) extra space; wide rows scroll in the green preview on phones.

Total
=

Hollow diamond

Two hollow V halves stitched with one row printer. Matches rows = 5 sample output at the top of the page.

💡 Tips for Enhancement

Try These

  • Try Program 10 to print a filled diamond
  • Increase rows to make a larger diamond
  • Replace * with another character
  • Print spaces between stars for a wider appearance
  • Try turning the hollow diamond into an outline box + diamond (Program 11)

Avoid

  • Printing the middle row twice (start lower half from rows - 1)
  • Using tabs for alignment (rendering differs)
  • Mixing &nbsp; with normal spaces (output becomes inconsistent)
  • Printing a second star for i = 1 (it duplicates the top/bottom point)
  • Forgetting the line break after each row

Key Takeaways

1

Upper half prints i = 1..rows.

2

Lower half prints i = rows - 1..1 to avoid duplication.

3

Each row uses leading spaces and an inner gap to place border stars.

4

Inner gap is 2*i - 3 for i > 1.

5

Time complexity is O(n²) due to printing \(\Theta(n^2)\) characters.

❓ Frequently Asked Questions

To avoid printing the widest middle row twice.
For row i, it is 2*i - 3 (only when i > 1).
It’s O(n²) for n rows, since total printed characters are \(\Theta(n^2)\).

Next: Filled Diamond

Continue to Program 10 to print a filled diamond star pattern.

Program 10 →
Did you know?

Once you can print a hollow diamond, a filled diamond is just changing the inner-gap logic into star printing.

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)

9 people found this page helpful

JavaScript Star Pattern 8 JavaScript Star Pattern 10