V-Shaped Hollow Star Pattern in JavaScript

Beginner
⏱️ 10 min read
📚 Updated: Aug 2025
🎯 1 Code Example
gap = 2*i - 3

What You'll Learn

This program prints a hollow V (wide first row, legs meet at the bottom). See Program 7 for the inverted V. It uses for (let i = rows; i >= 1; i--) so the inner gap shrinks by 2 each row.

For each row, print leading spaces, a left edge star, an optional inner gap, and a right edge star.

⭐ Pattern Output

When you run the program with rows = 5:

Output
*       *
 *     *
  *   *
   * *
    *
1

Complete JavaScript Program

Fixed rows = 5 version (reverse row loop):

JavaScript
const rows = 5;

for (let i = rows; i >= 1; i--) {
  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);
}

🧠 How It Works

1

Setup

for (let i = rows; i >= 1; i--) prints the wide pair of legs first and ends at the bottom vertex. The same margin / first star / optional gap / second star structure as Program 7 applies; only i counts down.

Setup
2

Left margin and first star

for (let s = 1; s <= rows - i; s++) line += " "; then line += "*";. As i decreases, rows - i grows, shifting each row right.

Left leg
3

Gap and second star

if (i > 1) appends 2 * i - 3 spaces in a loop, then the second *. When i === 1, only the first star runs—the bottom vertex.

Right leg
4

Finish the line

console.log(line) ends each row. Line width stays 2 * rows - 1, same geometry as Program 7 with reversed row order.

Line break
=

Hollow V

Vertex at the bottom, opening upward. O(n²) output for n = rows, O(1) extra space. Combine with Program 7 for a full hollow diamond (Program 9).

💡 Tips for Enhancement

Try These

  • Try Program 7 to print the inverted V (narrow top)
  • Combine Program 7 and Program 8 to form a hollow diamond (Program 9)
  • Increase rows to make a wider top row
  • Replace * with a different character
  • Print with spaces between stars for a wider look

Avoid

  • Printing a second star on the last row (it would duplicate the tip)
  • Using tabs for alignment (rendering differs)
  • Mixing &nbsp; with normal spaces (output becomes inconsistent)
  • Forgetting to reverse the outer loop
  • Forgetting the line break after each row

Key Takeaways

1

Reverse the row loop to start wide and narrow down.

2

Row prints rows - i leading spaces.

3

Two border stars form the hollow shape (except the final tip).

4

Inner gap is 2*i - 3 and shrinks by 2 each row.

5

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

❓ Frequently Asked Questions

Program 7 prints the inverted V with i = 1..rows (narrow top). Program 8 reverses the outer loop (i = rows..1) so the wide row is first and the legs meet at the bottom vertex.
Because both borders meet at the bottom vertex of the V.
It’s O(n²) for n rows, since total printed characters are \(\Theta(n^2)\).

Next: Hollow Diamond

Continue to Program 9 to combine Program 7 and Program 8 into a hollow diamond.

Program 9 →
Did you know?

The same gap formula 2*i - 3 works in both directions; only the outer loop direction changes.

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.

9 people found this page helpful