Tutorials Tonight's Logo

Star Pattern in javascript


What is the star pattern?

Star pattern is a series of * (you can use another character too) which creates a certain pattern or geometrical shape such as square, pyramid, triangle, etc. These patterns are created using some nested controlled loops.

The pattern programs are used to practice and boost programming skills like JavaScript loops and are also asked to create in programming interviews.

Star Pattern In Javascript

Star Pattern Programs In Javascript

Here we have discussed 10 different star patterns in detail with their programs in javascript.

  1. Square star pattern
  2. Right triangle star pattern
  3. Left triangle star pattern
  4. Downward triangle pattern
  5. Pyramid star pattern in javascript
  6. Reversed pyramid star pattern
  7. Diamond star pattern
  8. Hourglass star pattern
  9. Right Pascal star pattern
  10. Left Pascal star pattern

1. Square pattern

*****
*****
*****
*****
*****

To create square star pattern run 2 nested for loop. Execute each loop for 'n' number of times, where 'n' is number of rows/columns in the square, i.e for(let i = 0;i < n;i++).

The internal loop will run for 'n' number of times which will print starts in a row and at the end of the loop print a newline (\n).

Now execute this internal loop for another 'n' times using an external loop and your pattern will be ready.

let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 1; i <= n; i++) { // external loop
  for (let j = 0; j < n; j++) { // internal loop
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It

2. Right Triangle Star Pattern

*
**
***
****
*****

To create the right triangle star pattern again run 2 nested for loop external loop will take care of columns of pattern and the internal loop will print rows of the pattern.

You can observe from the above-shown pattern that we need to run an external loop for 'n' time while the internal loop runs for 1 time in the first execution, 2 times in the second execution, and so on till 'n' times.

You can use the value of i from the external loop which will increase from 1 to 'n' inside the internal loop as a condition.

let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 1; i <= n; i++) {
  for (let j = 0; j < i; j++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It

3. Left Triangle Star Pattern

    *
   **
  ***
 ****
*****

To create a left triangle star pattern you will have to deal with 3 loops, 1 of which is external and 2 are internal. The external loop will execute internal loops for 'n' number of times and the internal loop will design a pattern for each row.

From the above pattern, you can see each row has a series of stars and spaces. The number of stars in a row starting from 1 preceding with 'n-1' spaces and ends with 'n' star and 0 spaces.

Create 2 internal loops, 1st print n - i spaces and 2nd print i stars, where i is the number of time external loop executed.

let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 1; i <= n; i++) {
  // printing spaces
  for (let j = 0; j < n - i; j++) {
    string += " ";
  }
  // printing star
  for (let k = 0; k < i; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It


4. Downward Triangle Star Pattern

*****
****
***
**
*

To create a downward triangle star pattern use a nested loop, it is also known as a reverse star pattern. From the above-shown pattern, you can see the number of stars decreases from 'n' to 1.

Run a for loop inside an external loop whose number of iterations decreases from 'n' to 1.

let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 0; i < n; i++) {
  // printing star
  for (let k = 0; k < n - i; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It

5. Pyramid star pattern in javascript

    *
   ***
  *****
 *******
*********

The Pyramid star pattern is a famous star pattern, you can see the shape of the pattern above.

It uses 2 loops inside the external loop one for printing spaces and the other to print stars.

The number of spaces in a row is n - i in each row and the number of stars in a row is 2 * i - 1.

let n = 5; // you can take input from prompt or change the value
let string = "";
// External loop
for (let i = 1; i <= n; i++) {
  // printing spaces
  for (let j = 1; j <= n - i; j++) {
    string += " ";
  }
  // printing star
  for (let k = 0; k < 2 * i - 1; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It

Also, check out alphabet patterns in JavaScript.


6. Reversed pyramid star pattern

*********
 *******
  *****
   ***
    *

The reversed pyramid star pattern is a pyramid pattern upside-down.

It uses 2 loops inside the external loop one for printing spaces and the other to print the star. First loop prints spaces and other loop print stars. Here is the code of the reverse pyramid star pattern.

The number of spaces in a row is i and the number of stars is 2 * (n - i) - 1.

let n = 5; // you can take input from prompt or change the value
let string = "";
// External loop
for (let i = 0; i < n; i++) {
  // printing spaces
  for (let j = 0; j < i; j++) {
    string += " ";
  }
  // printing star
  for (let k = 0; k < 2 * (n-i) - 1; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It

7. Diamond star pattern

    *
   ***
  *****
 *******
*********
 *******
  *****
   ***
    *

The diamond star pattern is a combination of the pyramid and the reverse pyramid star pattern.

Observe in the above pattern it is a pyramid and a reverse pyramid together. Use the above concepts to create a diamond shape.

let n = 5; // you can take input from prompt or change the value
let string = "";
// Upside pyramid
for (let i = 1; i <= n; i++) {
  // printing spaces
  for (let j = n; j > i; j--) {
    string += " ";
  }
  // printing star
  for (let k = 0; k < i * 2 - 1; k++) {
    string += "*";
  }
  string += "\n";
}
// downside pyramid
for (let i = 1; i <= n - 1; i++) {
  // printing spaces
  for (let j = 0; j < i; j++) {
    string += " ";
  }
  // printing star
  for (let k = (n - i) * 2 - 1; k > 0; k--) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It


8. Hourglass star pattern

*********
 *******
  *****
   ***
    *
   ***
  *****
 *******
*********

The hourglass star pattern is also made up of pyramid and reverse pyramid star pattern.

Observe in the above pattern it is a reverse pyramid and a pyramid together. Use the above concepts to create a diamond shape.

let n = 5; // you can take input from prompt or change the value
let string = "";
// Reversed pyramid pattern
for (let i = 0; i < n; i++) {
  // printing spaces
  for (let j = 0; j < i; j++) {
    string += " ";
  }
  // printing star
  for (let k = 0; k < (n - i) * 2 - 1; k++) {
    string += "*";
  }
  string += "\n";
}
// pyramid pattern
for (let i = 2; i <= n; i++) {
  // printing spaces
  for (let j = n; j > i; j--) {
    string += " ";
  }
  // printing star
  for (let k = 0; k < i * 2 - 1; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It

9. Right pascal star pattern

*
**
***
****
*****
****
***
**
*

The right pascal star pattern is created using 2 nested loops.

You can observe in the above pattern it is nothing but the right triangle star pattern and reversed triangle star pattern together. Here is the code for the right pascal star pattern.

let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 1; i <= n; i++) {
  for (let j = 0; j < i; j++) {
    string += "*";
  }
  string += "\n";
}
for (let i = 1; i <= n - 1; i++) {
  for (let j = 0; j < n - i; j++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It

10. Left pascal star pattern

    *
   **
  ***
 ****
*****
 ****
  ***
   **
    *

The left pascal star pattern is also created using 2 nested loops.

It is the same as the right pascal star pattern just mirrored. Here is the code for the right pascal star pattern.

let n = 5; // you can take input from prompt or change the value
let string = "";
for (let i = 1; i <= n; i++) {
  for (let j = 0; j < n - i; j++) {
    string += " ";
  }
  for (let k = 0; k < i; k++) {
    string += "*";
  }
  string += "\n";
}
for (let i = 1; i <= n - 1; i++) {
  for (let j = 0; j < i; j++) {
    string += " ";
  }
  for (let k = 0; k < n - i; k++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);
▶ Try It

Conclusion

In this article, we learn and create 10 different star patterns. There are way more star patterns that you can work with but this gives you an understanding of how to work with it and the rest depends on your imagination and coding skills.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.