Star Pattern in JavaScript with Code

Star patterns are a fantastic way to dive into loops and logic in programming. They serve as a solid foundation for understanding control structures, nested loops, and algorithmic thinking. In this tutorial, we’ll walk you through the process of creating various star patterns in JavaScript, step by step, ensuring you grasp the logic and maintain clean code.

Mr. Rajesh mandal 16 days ago

12 comments
8 min read

Whether you’re just starting with JavaScript or gearing up for coding interviews, mastering pattern printing is key to understanding essential programming concepts. If you’re eager to learn JavaScript alongside data structures and real-world projects, check out Uncodemy’s Full-Stack JavaScript Course in Noida, which thoroughly covers both front-end and back-end skills.

What is a Star Pattern in JavaScript?

A star pattern in JavaScript involves printing shapes made of asterisks (*) on the console or a webpage using loops. These patterns can take the form of triangles, pyramids, diamonds, and more. They provide a great opportunity for learners to practice:

- Nested loops (for, while)

- Logic for determining spaces and star counts

- Formatting output for the console or DOM

- Algorithmic thinking

Creating star patterns helps you develop the ability to break down a visual shape into repetitive steps—a crucial skill in programming.

Why Learn Star Patterns in JavaScript?

Tackling pattern problems in JavaScript sharpens your understanding of:

- Loop control (both single and nested loops)

- Managing indentation and alignment

- Decomposing algorithms

- Debugging logical outputs

These skills are essential as you progress to more complex programming tasks or algorithmic challenges.

How to Approach Star Patterns

To create star patterns, you should:

- Grasp the shape (rows, columns, spaces, and stars)

- Determine the loop structure: how many outer and inner loops you’ll need

- Calculate the number of spaces and stars for each row

- Print the results using console.log() or DOM manipulation

Let’s dive into several star pattern examples and break down the logic behind each one.

Pattern 1: Simple Right-Angled Triangle

Logic

- Loop from i = 1 to n rows

- Print i stars on each line

Example Output for n = 5

Copy Code

*

**

***

****

*****

Code:

Copy Code

let n = 5;

for (let i = 1; i <= n; i++) {

  let row = '';

  for (let j = 1; j <= i; j++) {

row += '*';

  }

  console.log(row);

}

Pattern 2: Inverted Right-Angled Triangle

Logic

- Start a loop from i = n down to 1

- For each row, print i stars

Example Output for n = 5

Copy Code

*****

****

***

**

*

Code:

Copy Code

let n = 5;

for (let i = n; i >= 1; i--) {

  let row = '';

  for (let j = 1; j <= i; j++) {

row += '*';

  }

  console.log(row);

}

Pattern 3: Pyramid Shape

Logic

- Loop through the rows from 1 to n

- For each row i, print (n - i) spaces, followed by (2*i - 1) stars

Example Output for n = 5

Copy Code

    *

   ***

  *****

 *******

*********

Code:

Copy Code

function pyramidPattern(n) {

  for (let i = 1; i <= n; i++) {

let str = " ".repeat(n - i) + "*".repeat(2 * i - 1);

    console.log(str);

  }

}

// Example:

pyramidPattern(5);

Pattern 4: Inverted Pyramid

Logic

- Start a loop from i = n down to 1

- Print (n - i) spaces, then (2*i - 1) stars

Example Output for n = 5

Copy Code

*********

 *******

  *****

   ***

    *

Code:

Copy Code

function invertedPyramid(n) {

  for (let i = n; i >= 1; i--) {

let str = " ".repeat(n - i) + "*".repeat(2 * i - 1);

    console.log(str);

  }

}

// Example:

invertedPyramid(5);

Pattern 5: Diamond Shape

Logic

- Combine the logic of the Pyramid and Inverted Pyramid

- Create the upper half first, then the lower half, leaving out the middle row

Example Output for n = 5

Copy Code

    *

   ***

  *****

 *******

*********

 *******

  *****

   ***

    *

Code:

Copy Code

function diamondPattern(n) {

  // Upper half

  for (let i = 1; i <= n; i++) {

let str = " ".repeat(n - i) + "*".repeat(2 * i - 1);

    console.log(str);

  }

  // Lower half

  for (let i = n - 1; i >= 1; i--) {

let str = " ".repeat(n - i) + "*".repeat(2 * i - 1);

    console.log(str);

  }

}

// Example:

diamondPattern(5);

Pattern 6: Hollow Pyramid

Logic

- For the first and last rows, print full stars

- For the others, print stars at the boundaries with spaces in between

Example Output for n = 5

Copy Code

*

   * *

  *   *

 *  *

*********

Code:

Copy Code

function hollowPyramid(n) {

  for (let i = 1; i <= n; i++) {

let spaces = " ".repeat(n - i);

if (i === 1) {

      console.log(spaces + "*");

} else if (i === n) {

      console.log("*".repeat(2 * n - 1));

} else {

   let middleSpaces = " ".repeat(2 * i - 3);

      console.log(spaces + "*" + middleSpaces + "*");

}

  }

}

// Example:

hollowPyramid(5);

Implementing patterns in JavaScript:

You can bring these patterns to life using console output (whether in Node.js or your browser's console) or by manipulating the DOM to display them on a web page.

Here’s how this project can benefit you:

- Get hands-on practice with nested loops and conditional logic

- Use string manipulation to craft each line

- Allow user input to dynamically set the pattern size

Why Learning Star Pattern Logic is Valuable

- It reinforces your understanding of loops and string building

- It helps you visualize 2D output formats

- It cultivates algorithmic thinking that applies to real coding challenges

- It prepares you for technical interviews where pattern programs often come up

Common Pitfalls to Watch Out For

1. Mismanaging Loop Bounds

Make sure your loop indices are spot on—like looping from 1 to n for the rows.

2. Overlooking Spaces or Stars

Be meticulous about where to place spaces, especially for centered or hollow patterns.

3. Inefficient String Construction

Avoid concatenating strings in a clunky way, as it can slow down your program—it's better to build strings row by row.

Enhancing Your Pattern Program

- To make your pattern program even better, consider:

- Asking the user for the type and size of the pattern

- Validating the input (like ensuring it's a positive integer)

- Using functions to generate each pattern neatly

- Displaying the output on the web page instead of just in the console

- These improvements will bring your project closer to real-world applications.

Learning JavaScript Inside and Out

Getting a grip on star patterns in JavaScript is a stepping stone to diving into more complex topics like:

- Dynamic DOM manipulation

- Event handling

- Asynchronous programming

- Data structures such as arrays and objects

If you're looking for hands-on mentorship, project-based learning, and expert guidance, check out Uncodemy’s Full‑Stack JavaScript Course in Noida. It covers all the key topics and provides practical experience in both front-end and back-end coding.

Conclusion

Practicing star patterns is a timeless, concept-driven method to solidify your programming basics in JavaScript. In this blog, we’ve delved into various patterns like triangles, pyramids, diamonds, and hollow shapes, explaining the logic behind how to create them.

Working on these patterns helps you hone your skills in nested loops, string manipulation, conditional logic, and output formatting. These core concepts lay the groundwork for building more intricate programs and applications.

As you keep practicing these patterns, you’ll notice improvements in your logical thinking and code clarity, boosting your confidence in algorithmic thinking and coding.

Ready to elevate your JavaScript skills? Take a look at Uncodemy’s Full‑Stack JavaScript Course in Noida, where you’ll learn everything from the basics to advanced project development.