Hollow Diamond Inside Square Star Pattern in JavaScript
Beginner
8 min read
Updated: Sep 2026
3 programs
Live preview
Definition
What Is This Pattern?
A hollow diamond inside a square frames a hollow diamond with solid top and bottom bars: every line is 2 * rows characters wide, and height is 2 * rows - 1.
Remember
Rule: solid bars on ends; elsewhere left * + gap + right *
**********
**** ****
*** ***
** **
* *
** **
*** ***
**** ****
********** ← rows = 5 (width 10, height 9)
Unlike Program 9 (hollow diamond alone) or Program 10 (filled diamond), middle rows here are always left stars, gap spaces, then left stars again — with a mirrored i so the hollow opens to the waist and closes again.
Approach
How to Solve It
Two ways to emit the same shape — start with segment loops, then optionally shorten with "*".repeat.
Method
Idea
Best for
Three-segment loops
Solid bars on ends; left / gap / right inside
Learning, interviews, exams
"*".repeat segments
Build each bar or segment in one call
Shorter demos once formulas click
Pseudocode
Pseudocode
height = 2 * rows - 1
width = 2 * rows
for line from 1 to height:
lineStr = ""
if line is first or last:
append width stars
else:
i = line if line <= rows else (2 * rows - line)
left = rows - i + 1
gap = 2 * (i - 1)
append left stars, gap spaces, left stars
console.log(lineStr)
Cheat sheet
Goal
Pattern
Dimensions
height = 2 * rows - 1, width = 2 * rows
Solid bar
if (line === 1 || line === height) append width stars
Map line → i
i = (line <= rows) ? line : (2 * rows - line)
Left / right stars
left = rows - i + 1
Hollow gap
gap = 2 * (i - 1)
Width check
2 * left + gap == width
One-line bar shortcut
console.log("*".repeat(width));
line += vs console.log
API
Effect
Use for
line += "*" / line += " "
Stays on the same line
Each * and each space
console.log(line)
Ends the current line
After the bar or the three segments
Try it
Live Preview
Change the size and the framed hollow diamond updates instantly — including width and height.
Whole numbers from 1 to 10. Width is 2 * rows; height is 2 * rows - 1.
1. Set the grid.height = 9 and width = 10 for rows = 5.
2. Solid bars. When line is 1 or 9, append ten stars to lineStr.
3. Map the inner index. For other lines, i = line on the way down, or 2 * rows - line on the way up.
4. Append three segments.left stars, gap spaces, left stars — then console.log(lineStr).
On the waist (line = 5), i = 5, so left = 1 and gap = 8: one star on each side with a wide hollow center.
Example 2 — User Input Version
Read the size at runtime with prompt. Validate with parseInt before looping.
JavaScript
let rows = parseInt(prompt("Enter the number of rows:"), 10);
if (!Number.isFinite(rows) || rows < 1) {
console.log("Please enter a whole number of rows >= 1.");
} else {
let height = 2 * rows - 1;
let width = 2 * rows;
for (let line = 1; line <= height; line++) {
let lineStr = "";
if (line === 1 || line === height) {
for (let j = 1; j <= width; j++) {
lineStr += "*";
}
} else {
let i = (line <= rows) ? line : (2 * rows - line);
let left = rows - i + 1;
let gap = 2 * (i - 1);
for (let j = 1; j <= left; j++) {
lineStr += "*";
}
for (let j = 1; j <= gap; j++) {
lineStr += " ";
}
for (let j = 1; j <= left; j++) {
lineStr += "*";
}
}
console.log(lineStr);
}
}
Output (when user enters 4)
********
*** ***
** **
* *
** **
*** ***
********
How It Works
1. Prompt and parse. Ask for a size, then convert with parseInt(..., 10).
2. Validate first. Reject NaN or non-positive values before looping.
3. Same grid core. Only the source of rows changes — the bar and left/gap/right logic match Example 1.
Example 3 — "*".repeat Segments
Build the solid bar and each left / gap / right piece as strings — same shape, fewer inner loops.
JavaScript
let rows = 5;
let height = 2 * rows - 1;
let width = 2 * rows;
for (let line = 1; line <= height; line++) {
if (line === 1 || line === height) {
console.log("*".repeat(width));
} else {
let i = (line <= rows) ? line : (2 * rows - line);
let left = rows - i + 1;
let gap = 2 * (i - 1);
console.log("*".repeat(left) + " ".repeat(gap) + "*".repeat(left));
}
}
1. Same outer loop. Still walk line from 1 to height with the same bar vs inner branch.
2. Build each segment."*".repeat(left) and " ".repeat(gap) replace the character loops.
3. Print and advance. One console.log prints the full row (bar or left + gap + right).
Learn the loop version first (Examples 1–2) so you can explain every bound in an interview; treat this as a polish shortcut afterward.
Edge Cases & Pitfalls
Check these before calling the solution done.
Width vs height
Do not swap formulas
Width is 2 * rows; height is 2 * rows - 1. Mixing them skews the whole frame.
Wrong mirror
Broken lower half
Use i = (line <= rows) ? line : (2 * rows - line). Forgetting the mirror breaks symmetry.
Program 9 logic
Different layout
Diagonal i == j tests from Program 9 do not draw this framed figure — use left / gap / right.
Reuse lineStr
Growing leftovers
Reset lineStr = "" at the start of each outer iteration, or characters from previous rows stick around.
rows = 1
Single bar
Height = 1, width = 2 — output is just ** (first line is also the last).
NaN input
Validate parseInt
Letters or empty prompt yield NaN — check Number.isFinite(rows) && rows >= 1.
Analysis
Time and Space Complexity
Program
Time
Extra space
Nested loops (Examples 1–2)
O(rows²)
O(rows) for the current line string
"*".repeat segments (Example 3)
O(rows²)
O(rows) temporary per segment
About 2n - 1 lines × 2n characters per line for n = rows — still quadratic in n.
Remember
Key Takeaways
Grid: width 2n, height 2n - 1.
Bars: solid top and bottom; elsewhere left / gap / right.
Mirror: map line → i, then left = rows - i + 1 and gap = 2 * (i - 1).
Complexity:O(n²) time; O(n) extra space for the current line string.
One line: solid bars on the ends; elsewhere print left stars, gap spaces, left stars — keep 2 * left + gap == width.
Frequently Asked Questions
Use height 2*rows-1 and width 2*rows. Print a full row of stars on the first and last lines. For every other line, map line to i with symmetry, then append (rows-i+1) stars, a gap of 2*(i-1) spaces, and the same number of stars again.
Width is 2*rows and height is 2*rows-1 so the top and bottom are full horizontal bars while the sides close on the leftmost and rightmost columns of the inner rows.
Program 9 prints a hollow diamond alone with constant width 2*rows-1. Program 11 adds solid top and bottom bars of length 2*rows and builds each inner line from left stars, a gap, and right stars.
left = rows - i + 1 is how many stars sit on each side. gap = 2 * (i - 1) is the hollow space between them. Together they always sum to width.
If line <= rows, i = line. Otherwise i = 2 * rows - line. That mirrors the distance from the nearest end so the hollow waist is widest in the middle.
line += "*" or line += " " stays on the same row. console.log(line) ends the current line after the bar or the three segments are built.
O(n²) where n is rows. There are 2n-1 lines and each prints 2n characters.
Use parseInt(prompt(...), 10) and check Number.isFinite(rows) && rows >= 1 so bad input does not produce NaN rows.
🤔
Did you know?
Every line is exactly 2 * rows characters wide. Inner rows always satisfy 2 * left + gap == 2 * rows — so the frame closes cleanly on both sides.
