When you start learning the basics of any programming language, one of the common and fundamental exercises you will encounter is creating simple star pattern programs.
But why do you even need to practice such star pattern programs? Is there any specific reason behind this?
The answer is yes. The star pattern programs are basically designed to help you understand and practice the working of nested loops.
These nested loops could be for loops or while loops or a combination of both.
In this article, I am going to show you the top 25 star pattern programs in JavaScript with examples. So, without any further ado, let’s get started.
1. Square Star Pattern Program
This is the most basic star pattern program. In this pattern, we use two nested loops to create a square-like structure using a combination of stars(*).
The outer loop decides the number of rows and the inner loop decides the number of columns in the pattern.
const n = 5;
let str = "";
for(let i = 1; i <= n; i++) {
for(let j = 1; j <= n; j++) {
str +="*";
}
str +="\n"; // Add new line
}
// Print the star pattern
console.log(str);
Output:
***** ***** ***** ***** *****
2. Hollow Square Star Pattern Program
This pattern is a variation of the square star pattern. In this pattern, we only show the first row, last row, first column, and last column’s stars and replace all inner star positions with an empty space.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
for (let j = 1; j <= n; j++) {
if (i === 1 || i === n || j === 1 || j === n) {
str += '*';
} else {
str += ' ';
}
}
str += '\n';
}
console.log(str);
Output:
***** * * * * * * *****
3. Rhombus Star Pattern Program
The Rhombus star pattern is a variation of the square pattern. In this pattern, we basically create a skewed square.
This is done by filling initial and end star positions with an empty space.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= n; j++) {
row += '*';
}
str += row + '\n';
}
console.log(str);
Output:
***** ***** ***** ***** *****
4. Hollow Rhombus Star Pattern Program
The hollow Rhombus star pattern is created by filling the inner positions of the rhombus with empty spaces.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= n; j++) {
if (j === 1 || j === n || i === 1 || i === n) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
***** * * * * * * *****
5. Mirrored Rhombus Pattern Program
This pattern is just a mirror image of the actual Rhombus pattern.
const n = 5;
let str = '';
for (let i = n; i >= 1; i--) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= n; j++) {
row += '*';
}
str += row + '\n';
}
console.log(str);
Output:
*****
*****
*****
*****
*****
6. Mirrored Hollow Rhombus Pattern Program
This pattern is created by filling the inner positions of the mirrored Rhombus with empty spaces.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j < i; j++) {
row += ' ';
}
for (let j = 1; j <= n; j++) {
if (j === 1 || j === n || i === 1 || i === n) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
*****
* *
* *
* *
*****
7. Left Triangle Pattern Program
This pattern is also a variation of a square pattern where we show only the first half(diagonally) of the square and keep the right half hidden by filling each star position with an empty space.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
for (let j = 1; j <= i; j++) {
str += '* ';
}
str += '\n';
}
console.log(str);
Output:
* * * * * * * * * * * * * * *
8. Hollow Left Triangle Pattern Program
This pattern is achieved by filling the inner positions of the left triangle with empty spaces.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
for (let j = 1; j <= i; j++) {
if (j === 1 || j === i || i === n) {
str += '* ';
} else {
str += ' ';
}
}
str += '\n';
}
console.log(str);
Output:
* * * * * * * * * * * *
9. Right Triangle Pattern Program
This pattern is just a mirrored image of the left triangle.
In this pattern, we show only the second half(diagonally) of the square and keep the first half hidden by filling each star position with an empty space.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
for (let j = 1; j <= n; j++) {
if (j <= n - i) {
str += ' ';
} else {
str += '* ';
}
}
str += '\n';
}
console.log(str);
Output:
*
* *
* * *
* * * *
* * * * *
10. Hollow Right Triangle Pattern Program
This pattern is achieved by filling the inner positions of the right aligned right angle triangle with empty spaces.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
for (let j = 1; j <= n - i; j++) {
str += ' ';
}
for (let j = 1; j <= i; j++) {
if (j === 1 || j === i || i === n) {
str += '* ';
} else {
str += ' ';
}
}
str += '\n';
}
console.log(str);
Output:
*
* *
* *
* *
* * * * *
11. Inverted Left Triangle Pattern Program
This pattern is a mirror(horizontal) image of left aligned right angle triangle. You can think of it as a square pattern with only the first half(diagonally) filled with stars.
const n = 5;
let str = '';
for (let i = n; i >= 1; i--) {
let row = '';
for (let j = 1; j <= i; j++) {
str += '* ';
}
str += '\n';
}
console.log(str);
Output:
* * * * * * * * * * * * * * *
12. Hollow Inverted Left Triangle Pattern Program
This pattern is achieved by filling the inner positions of the above program with empty spaces.
const n = 5;
let str = '';
for (let i = n; i >= 1; i--) {
let row = '';
for (let j = 1; j <= i; j++) {
if (j === 1 || j === i || i === n) {
row += '* ';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
* * * * * * * * * * * *
13. Inverted Right Triangle Pattern Program
This pattern is a mirror image of right aligned right angle triangle pattern.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
for (let j = 1; j <= n; j++) {
if (j <= i - 1) {
str += ' ';
} else {
str += '* ';
}
}
str += '\n';
}
console.log(str);
Output:
* * * * *
* * * *
* * *
* *
*
14. Hollow Inverted Right Triangle Pattern
Just like other patterns, this is also achieved by filling the inner positions of the stars with empty spaces.
const n = 5;
let str = '';
for (let i = n; i >= 1; i--) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= i; j++) {
if (j === 1 || j === i || i === n) {
row += '* ';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
* * * * *
* *
* *
* *
*
15. Pyramid Pattern Program
The pyramid pattern is one of the commonly asked patterns in interviews and online tests. Just like other patterns, it also uses two nested for loops.
You can think of it as a square where each row contains exactly (n – i) spaces and (2*i – 1) stars.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= 2 * i - 1; j++) {
row += '*';
}
str += row + '\n';
}
console.log(str);
Output:
* *** ***** ******* *********
16. Inverted Pyramid Pattern Program
This pattern is just a mirror image of the pyramid pattern.
const n = 5;
let str = '';
for (let i = n; i >= 1; i--) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= 2 * i - 1; j++) {
row += '*';
}
str += row + '\n';
}
console.log(str);
Output:
*********
*******
*****
***
*
17. Hollow Pyramid Pattern Program
The hollow pyramid pattern is achieved by filling the inner positions of the stars in a pyramid pattern with empty spaces.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= 2 * i - 1; j++) {
if (j === 1 || j === 2 * i - 1 || i === n) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
* * * * * * * *********
18. Inverted Hollow Pyramid Pattern Program
This pattern is just an inverted form of the above pattern.
const n = 5;
let str = '';
for (let i = n; i >= 1; i--) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= 2 * i - 1; j++) {
if (j === 1 || j === 2 * i - 1 || i === n) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
*********
* *
* *
* *
*
19. Half Diamond(Right Pascal) Pattern Program
You can think of this pattern as a combination of the left aligned right angle triangle and inverted right angle triangle.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= i; j++) {
row += '*';
}
str += row + '\n';
}
for (let i = n - 1; i >= 1; i--) {
let row = '';
for (let j = 1; j <= i; j++) {
row += '*';
}
str += row + '\n';
}
console.log(str);
Output:
* ** *** **** ***** **** *** ** *
20. Diamond Pattern Program
The diamond pattern is nothing but a combination of the pyramid pattern and the inverted pyramid pattern.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= 2 * i - 1; j++) {
row += '*';
}
str += row + '\n';
}
for (let i = n - 1; i >= 1; i--) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= 2 * i - 1; j++) {
row += '*';
}
str += row + '\n';
}
console.log(str);
Output:
*
***
*****
*******
*********
*******
*****
***
*
21. Hourglass Pattern Program
The Hourglass pattern is a combination of the inverted pyramid and pyramid pattern.
const n = 5;
let str = '';
// Upper Half
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= 2 * n - 1; j++) {
if (j >= i && j <= 2 * n - i) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
// Lower Half
for (let i = n - 1; i >= 1; i--) {
let row = '';
for (let j = 1; j <= 2 * n - 1; j++) {
if (j >= i && j <= 2 * n - i) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
*********
*******
*****
***
*
***
*****
*******
*********
22. Hollow Diamond Pattern Program
The hollow diamond pattern is achieved by filling the inner positions of the diamond pattern with empty spaces.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= 2 * i - 1; j++) {
if (j === 1 || j === 2 * i - 1) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
for (let i = n - 1; i >= 1; i--) {
let row = '';
for (let j = 1; j <= n - i; j++) {
row += ' ';
}
for (let j = 1; j <= 2 * i - 1; j++) {
if (j === 1 || j === 2 * i - 1) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
*
* *
* *
* *
* *
* *
* *
* *
*
23. Square with Diagonals Pattern Program
This program is achieved by filling the first row, first column, last row, last column and diagonal positions with stars.
const n = 7;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n; j++) {
if (i === 1 || i === n || j === 1 || j === n || i === j || j === n - i + 1) {
row += '* ';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
24. Plus Pattern Program
This pattern is achieved by filling the middle row and middle column of the square pattern with stars and remaining positions with empty spaces.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n; j++) {
if (i === Math.ceil(n / 2) || j === Math.ceil(n / 2)) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
* * ***** * *
25. X Pattern Program
This pattern is achieved by filling the diagonal positions of the square pattern with stars and remaining positions with empty spaces.
const n = 5;
let str = '';
for (let i = 1; i <= n; i++) {
let row = '';
for (let j = 1; j <= n; j++) {
if (j === i || j === n - i + 1) {
row += '*';
} else {
row += ' ';
}
}
str += row + '\n';
}
console.log(str);
Output:
* * * * * * * * *
I hope you liked this post.
Thanks for reading!
