Introduction to Star Patterns in JavaScript

Star patterns are a popular way to practice and improve your programming skills in JavaScript. By creating various shapes and designs using stars, you can enhance your understanding of loops, nested loops, and logic building. In this blog post, we will explore different types of star patterns, their approaches, and provide code snippets to help you create them.

Types of Star Patterns

1. Square Star Pattern

2. Hollow Square Star Pattern

3. Right Triangle Star Pattern

4. Left Triangle Star Pattern

5. Downward Triangle Star Pattern

6. Hollow Triangle Star Pattern

7. Pyramid Star Pattern

8. Reversed Pyramid Star Pattern

9. Hollow Pyramid Star Pattern

10. Diamond Star Pattern

Square Star Pattern

The square star pattern is the simplest form of a star pattern. It creates a square-shaped pattern of stars by using nested loops.Approach:

1. Run two nested loops, one for rows and one for columns.

2. The outer loop runs for n times, where n is the number of rows and columns in the square.

3. The inner loop also runs for n times, printing a star for each iteration.

4. After the inner loop completes, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 0; i < n; i++) {
  let row = "";
  for (let j = 0; j < n; j++) {
    row += "* ";
  }
  console.log(row);
}

*

Hollow Square Star Pattern

The hollow square star pattern creates a square with stars only on the edges, leaving the center empty.Approach:

1. Run two nested loops, one for rows and one for columns.

2. The outer loop runs for n times, where n is the number of rows and columns in the square.

3. The inner loop runs for n times as well.

4. If the current row is the first or last row, or the current column is the first or last column, print a star.

5. Otherwise, print a space.

6. After the inner loop completes, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 0; i < n; i++) {
  let row = "";
  for (let j = 0; j < n; j++) {
    if (i === 0 || i === n - 1 || j === 0 || j === n - 1) {
      row += "* ";
    } else {
      row += "  ";
    }
  }
  console.log(row);
}

*

Right Triangle Star Pattern

The right triangle star pattern creates a right-angled triangle using stars.Approach:

1. Run two nested loops, one for rows and one for columns.

2. The outer loop runs for n times, where n is the number of rows in the triangle.

3. The inner loop runs for i times, where i is the current row number.

4. In each iteration of the inner loop, print a star.

5. After the inner loop completes, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 1; i <= n; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += "* ";
  }
  console.log(row);
}

*

Left Triangle Star Pattern

The left triangle star pattern creates a left-aligned triangle using stars.Approach:

1. Run two nested loops, one for rows and one for columns.

2. The outer loop runs for n times, where n is the number of rows in the triangle.

3. The inner loop runs for n - i times, where i is the current row number.

4. In each iteration of the inner loop, print a space.

5. After the inner loop completes, run another loop for i times, printing a star in each iteration.

6. After the second inner loop completes, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 1; i <= n; i++) {
  let row = "";
  for (let j = 1; j <= n - i; j++) {
    row += "  ";
  }
  for (let k = 1; k <= i; k++) {
    row += "* ";
  }
  console.log(row);
}

        *

Downward Triangle Star Pattern

The downward triangle star pattern creates a downward-facing triangle using stars.Approach:

1. Run a single loop for n times, where n is the number of rows in the triangle.

2. In each iteration, print n - i + 1 stars, where i is the current row number.

3. After each iteration, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 1; i <= n; i++) {
  let row = "";
  for (let j = 1; j <= n - i + 1; j++) {
    row += "* ";
  }
  console.log(row);
}

*

Hollow Triangle Star Pattern

The hollow triangle star pattern creates a triangle with stars only on the edges, leaving the center empty.Approach:

1. Run two nested loops, one for rows and one for columns.

2. The outer loop runs for n times, where n is the number of rows in the triangle.

3. The inner loop runs for i times, where i is the current row number.

4. If the current row is the first row or the last row, or the current column is the first column or the last column for that row, print a star.

5. Otherwise, print a space.

6. After the inner loop completes, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 1; i <= n; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    if (i === 1 || i === n || j === 1 || j === i) {
      row += "* ";
    } else {
      row += "  ";
    }
  }
  console.log(row);
}

*

Pyramid Star Pattern

The pyramid star pattern creates a pyramid-shaped pattern using stars.Approach:

1. Run two nested loops, one for rows and one for spaces.

2. The outer loop runs for n times, where n is the number of rows in the pyramid.

3. The first inner loop runs for n - i times, printing spaces in each iteration.

4. The second inner loop runs for 2 * i - 1 times, printing stars in each iteration.

5. After the inner loops complete, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 1; i <= n; i++) {
  let row = "";
  for (let j = 1; j <= n - i; j++) {
    row += "  ";
  }
  for (let k = 1; k <= 2 * i - 1; k++) {
    row += "* ";
  }
  console.log(row);
}

        *

Hollow Pyramid Star Pattern

The hollow pyramid star pattern creates a pyramid-shaped pattern with stars only on the edges, leaving the center empty.Approach:

1. Run two nested loops, one for rows and one for spaces and stars.

2. The outer loop runs for n times, where n is the number of rows in the hollow pyramid.

3. The first inner loop runs for n - i times, printing spaces in each iteration.

4. The second inner loop runs for 2 * i - 1 times.

5. If the current row is the first row or the last row, or the current column is the first column or the last column for that row, print a star.

6. Otherwise, print a space.

7. After the inner loops complete, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 1; i <= n; i++) {
  let row = "";
  for (let j = 1; j <= n - i; j++) {
    row += "  ";
  }
  for (let k = 1; k <= 2 * i - 1; k++) {
    if (i === 1 || i === n || k === 1 || k === 2 * i - 1) {
      row += "* ";
    } else {
      row += "  ";
    }
  }
  console.log(row);
}

        *

Diamond Star Pattern

The diamond star pattern creates a diamond-shaped pattern using stars.Approach:

1. Run two nested loops, one for rows and one for spaces and stars.

2. The outer loop runs for 2 * n - 1 times, where n is the number of rows in the diamond.

3. The first inner loop runs for abs(n - i) times, printing spaces in each iteration.

4. The second inner loop runs for 2 * min(i, 2 * n - i) - 1 times, printing stars in each iteration.

5. After the inner loops complete, print a newline character to move to the next row.

Code:

let n = 5;

for (let i = 1; i <= 2 * n - 1; i++) {
  let row = "";
  for (let j = 1; j <= Math.abs(n - i); j++) {
    row += "  ";
  }
  for (let k = 1; k <= 2 * Math.min(i, 2 * n - i) - 1; k++) {
    row += "* ";
  }
  console.log(row);
}

        *

Happy Coding!