Star Pattern in javascript
Star Pattern
While learning programming concepts Star pattern is used to test different programming skills like looping, conditional statements, etc. The program is to display a pattern of stars. Star patterns can be created in any programming language, however here we are going to use JavaScript.
It is a series of stars (*) which creates a certain pattern or geometrical shape such as a 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 Program In Javascript
We are going to create 15 different star pattern program in javascript and print them.
- Square star pattern in javascript
- Hollow square pattern
- Right triangle star pattern
- Left triangle star pattern
- Downward triangle pattern
- Hollow triangle pattern
- Pyramid star pattern in javascript
- Reversed pyramid star pattern
- Hollow pyramid star pattern
- Diamond pattern in javascript
- Hollow diamond pattern
- Hourglass star pattern
- Right Pascal star pattern
- Left Pascal star pattern
- Heart star pattern
1. Square Star Pattern in Javascript
***** ***** ***** ***** *****
To create a 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 a newline at the end of the loop (\n) while the outer loop will run the internal loop for 'n' number of times which will print starts in a columns
Example
let n = 5; // row or column count
// defining an empty string
let string = "";
for(let i = 0; i < n; i++) { // external loop
for(let j = 0; j < n; j++) { // internal loop
string += "*";
}
// newline after each row
string += "\n";
}
// printing the string
console.log(string);2. Hollow Square Pattern
***** * * * * * * *****
Steps to create a hollow square star pattern are:
- Create a variable to store the string and assign it with an empty string
- Create a for loop to run for 'n' number of times, where 'n' is number of rows/columns in the square, i.e
for(let i = 0; i < n; i++) - Inside the loop, create a for loop that prints a star (*) at the beginning and end of the line and space in between
- Also, keep in mind that the first and last row should have only stars
- Add a new line after each row
Example
let n = 5; // row or column count
// defining an empty string
let string = "";
for(let i = 0; i < n; i++) { // external loop
for(let j = 0; j < n; j++) { // internal loop
if(i === 0 || i === n - 1) {
string += "*";
}
else {
if(j === 0 || j === n - 1) {
string += "*";
}
else {
string += " ";
}
}
}
// newline after each row
string += "\n";
}
// printing the string
console.log(string);3. Right Triangle Pattern in Javascript
* ** *** **** *****
To create a right triangle pattern in javascript 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 starts 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 times the external loop is executed.
Example
let n = 5;
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);4. Left Triangle Pattern in Javascript
* ** *** **** *****
To create the left triangle pattern in javascript 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.
Example
let n = 5;
let string = "";
for (let i = 1; i <= n; i++) {
for (let j = 0; j < i; j++) {
string += "*";
}
string += "\n";
}
console.log(string);5. 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.
Example
let n = 5;
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);6. Hollow Triangle Star Pattern
* ** * * * * * * ******
Steps to create a hollow triangle star pattern are:
- Run 2 nested loops, 1st for 'n' times and 2nd for 1 time for the first row, 2nd for 2 times for the second row, and so on till 'n' times
- Print star for first and last position in each row and space for other positions
- In the last line print star at each position
Example
let n = 6;
let string = "";
for (let i = 1; i <= n; i++) {
// printing star
for (let j = 0; j < i; j++) {
if(i === n) {
string += "*";
}
else {
if (j == 0 || j == i - 1) {
string += "*";
}
else {
string += " ";
}
}
}
string += "\n";
}
console.log(string);7. Javascript Pyramid Pattern
* *** ***** ******* *********
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.
Example
let n = 5;
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);Also, check out alphabet patterns in JavaScript.
8. 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.
Example
let n = 5;
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);9. Hollow Pyramid Star Pattern
* * * * * * * *********
Steps to create a hollow pyramid star pattern are:
- Run 2 nested loops, 1st for 'n' times and there are 2 internal loops one to print the first series of spaces and the other to print star and space series
- Print star for first and last position in each row and space in between
- The print star at each position in the last row
Example
let n = 5;
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++) {
if(i === 1 || i === n) {
string += "*";
}
else {
if(k === 0 || k === 2 * i - 2) {
string += "*";
}
else {
string += " ";
}
}
}
string += "\n";
}
console.log(string);10. Diamond Pattern in Javascript
*
***
*****
*******
*********
*******
*****
***
*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.
Example
let n = 5;
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);11. Hollow Diamond Pattern
*
* *
* *
* *
* *
* *
* *
* *
*A hollow diamond pattern is a simple diamond shape that has only a boundary that is made up of stars. It is a combination of the diamond and the reverse diamond pattern.
Example
let n = 5;
let string = "";
// Upside pyramid
// upside diamond
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++) {
if (k === 0 || k === 2 * i - 2) {
string += "*";
}
else {
string += " ";
}
}
string += "\n";
}
// downside diamond
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 >= 1; k--) {
if (k === 1 || k === (n - i) * 2 - 1) {
string += "*";
}
else {
string += " ";
}
}
string += "\n";
}
console.log(string);12. Hourglass Star Pattern
*********
*******
*****
***
*
***
*****
*******
*********The hourglass star pattern is also made up of pyramid and reverse pyramid star patterns.
Observe in the above pattern it is a reverse pyramid and a pyramid together. Use the above concepts to create a diamond shape.
Example
let n = 5;
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);13. 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.
Example
let n = 5;
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);14. 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.
Example
let n = 5;
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);15. Heart Star Pattern In JavaScript
*** ***
***** *****
***********
*********
*******
*****
***
*Heart star pattern is a quite complex structure to create. If you observe the pattern shown above then you can see it is made up of many other smaller structures and spaces.
The complete code of the heart star pattern is as follows.
Example
var n = 6;
var str = "";
for (let i = n / 2; i < n; i += 2) {
// print first spaces
for (let j = 1; j < n - i; j += 2) {
str += " ";
}
// print first stars
for (let j = 1; j < i + 1; j++) {
str += "*";
}
// print second spaces
for (let j = 1; j < n - i + 1; j++) {
str += " ";
}
// print second stars
for (let j = 1; j < i + 1; j++) {
str += "*";
}
str += "\n";
}
// lower part
// inverted pyramid
for (let i = n; i > 0; i--) {
for (let j = 0; j < n - i; j++) {
str += " ";
}
for (let j = 1; j < i * 2; j++) {
str += "*";
}
str += "\n";
}
console.log(str);You can run all of the above codes in our online javascript compiler.
Conclusion
In this article, we have discussed the star pattern in JavaScript. We have created a star pattern using the concepts of loops and conditionals. We have also used the concepts of recursion and iteration to create the star pattern.
There are way more star patterns that you can work with but these examples are sufficient to give you a basic understanding of how to work with them and the rest depends on your imagination and coding skills.