Loading...

17 Star Pattern Programs in JavaScript (with code):

Do you have a passion for JavaScript programming and a fascination with creating visually stunning patterns? Look no further than our website, "17 Star Pattern Programs in JavaScript (with code)." With an extensive collection of 17 unique star patterns, this website is a treasure trove for JavaScript enthusiasts seeking to challenge their coding skills while exploring the world of creative design.

Our user-friendly interface ensures a seamless browsing experience, enabling you to navigate effortlessly through the collection of star patterns. The website's intuitive layout and clean design make it easy to understand and follow along, regardless of your programming expertise.

Not only does the website serve as an educational resource, but it also encourages creativity and experimentation. Feel free to modify the existing code or customize the patterns to suit your artistic vision. The possibilities are endless, giving you the freedom to showcase your unique style and create personalized star patterns. Whether you're a student, a hobbyist, or a professional developer, our website provides an exciting and engaging platform to refine your JavaScript skills while indulging in the joy of creating captivating star patterns.

Pattern 1: Left Triangle

The Left Triangular Star Pattern involves printing a series of stars in a left-aligned triangular shape. As you progress through the pattern, the number of stars per line increases incrementally, forming a triangular structure. This pattern is an excellent exercise for understanding loops, nested loops, and conditional statements in JavaScript.

Preview: 
*
* *
* * *
* * * *
* * * * *

To create a Left Triangular Star Pattern in JavaScript, you can follow these steps:

  1. Start by defining a variable to store the desired number of rows for the pattern.
  2. Implement a loop that iterates from 1 to the specified number of rows.
  3. Within the loop, employ a nested loop to print the stars on each line. The number of stars on each line corresponds to the current row number.
  4. Display the pattern by printing the stars on each line, separated by spaces or any desired delimiter.
By incorporating these steps into your JavaScript code, you can generate a beautiful Left Triangular Star Pattern.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <= num; i++) {    //first 'for loop' for horizontal lines
        for (let j = 1; j <= i; j++) {      //second 'for loop' to print star
            pattern += "* ";    //adding * to pattern string
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 2: Hollow Left Triangle

The Hollow Left Triangular Star Pattern involves printing a series of stars in a left-aligned triangular shape while leaving empty spaces within the triangle. This pattern showcases your mastery of loops, nested loops, and conditional statements in JavaScript, allowing you to create intricate and aesthetically pleasing designs.

Preview: 
*
* *
*   *
*     *
* * * * *

To create a Hollow Left Triangular Star Pattern in JavaScript, follow these steps:

  1. Begin by defining a variable to store the desired number of rows for the pattern.
  2. Implement a loop that iterates from 1 to the specified number of rows.
  3. Within the loop, use a nested loop to print the stars and spaces on each line. The number of stars on each line corresponds to the current row number, while the spaces represent the hollow areas.
  4. Incorporate conditional statements to determine when to print a star or a space, based on the pattern's requirements.
  5. Display the pattern by printing the stars and spaces on each line, creating the hollow triangular shape.
By following these steps and tweaking the code, you can generate a stunning Hollow Left Triangular Star Pattern in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers
    for (let i = 1; i <= num; i++) {    //first 'for loop' for horizontal lines
        for (let j = 1; j <= i; j++) {      //second 'for loop' to print star and space between them
            if (j==1 || j==i || i==num) {   //condition to make it hollow
                pattern += "* ";
            }
            else{
                pattern += "  ";
            }
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 3: Downward Left Triangle

The Downward Left Triangular Star Pattern involves printing a series of stars in a left-aligned triangular shape, but in a downward direction. As you progress through the pattern, the number of stars per line decreases incrementally, forming a reversed triangular structure. This pattern presents an excellent opportunity to practice loops, nested loops, and conditional statements in JavaScript.

Preview: 
* * * * *
* * * *
* * *
* *
*

To create a Downward Left Triangular Star Pattern in JavaScript, you can follow these steps:

  1. Start by defining a variable to store the desired number of rows for the pattern.
  2. Implement a loop that iterates from the specified number of rows to 1, decrementing by 1 in each iteration.
  3. Within the loop, use a nested loop to print the stars on each line. The number of stars on each line corresponds to the current row number.
  4. Display the pattern by printing the stars on each line, separated by spaces or any desired delimiter.
By incorporating these steps into your JavaScript code, you can generate a captivating Downward Left Triangular Star Pattern.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <= num; i++) {    //first 'for loop' for horizontal lines
        for (let j = 0; j <= (num-i); j++) {    //second 'for loop' for opposite pattern; see loop condition
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 4: Downward Hollow Left Triangle

The Downward Hollow Left Triangular Star Pattern involves printing a series of stars in a left-aligned triangular shape, but in a downward direction, while leaving empty spaces within the triangle. This pattern provides an excellent opportunity to exercise your skills in loops, nested loops, and conditional statements in JavaScript, allowing you to create intricate and visually appealing designs.

Preview: 
* * * * *
*     *
*   *
* *
*

To create a Downward Hollow Left Triangular Star Pattern in JavaScript, follow these steps:

  1. Begin by defining a variable to store the desired number of rows for the pattern.
  2. Implement a loop that iterates from the specified number of rows to 1, decrementing by 1 in each iteration.
  3. Within the loop, use a nested loop to print the stars and spaces on each line. The number of stars on each line corresponds to the current row number, while the spaces represent the hollow areas.
  4. Incorporate conditional statements to determine when to print a star or a space, based on the pattern's requirements.
  5. Display the pattern by printing the stars and spaces on each line, creating the downward hollow triangular shape.
By following these steps and customizing the code, you can generate a captivating Downward Hollow Left Triangular Star Pattern in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <= num; i++) {    //first 'for loop' for horizontal lines
        for (let j = 0; j <= (num-i); j++) {    //second 'for loop' for opposite pattern
            if (j==0 || j==(num-i) || i==1) {   //condition to make pattern hollow
                pattern += "* ";
            } else {
                pattern += "  ";    // spaces to make pattern hollow
            }
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 5: Right Triangle

The Right Triangular Star Pattern involves printing a series of stars in a triangular shape, with each line having an incrementally increasing number of stars from left to right. This pattern is an excellent opportunity to practice loops, nested loops, and conditional statements in JavaScript.

Preview: 
        *
      * *
    * * *
  * * * *
* * * * *

To create a Right Triangular Star Pattern in JavaScript, you can follow these steps:

  1. Begin by defining a variable to store the desired number of rows for the pattern.
  2. Implement a loop that iterates from 1 to the specified number of rows.
  3. Within the loop, use a nested loop to print the appropriate number of spaces at the beginning of each line. The number of spaces is determined by subtracting the current row number from the total number of rows.
  4. Use another nested loop to print the stars on each line. The number of stars on each line corresponds to the current row number.
  5. Use another nested loop to print the stars on each line. The number of stars on each line corresponds to the current row number.
By incorporating these steps into your JavaScript code, you can generate a visually appealing Right Triangular Star Pattern.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <=num; i++) {    //first 'for loop' for horizontal lines
        for (let j = 1; j <= (num-i); j++) {    //second 'for loop' to add 'spaces' before pattern
            pattern += "  ";
        }

        for (let k = 1; k <= i; k++) {      //third 'for loop' to add * to pattern string
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 6: Hollow Right Triangle

The Hollow Right Triangular Star Pattern involves printing a series of stars in a right-aligned triangular shape while leaving empty spaces within the triangle. This pattern provides an excellent opportunity to practice loops, nested loops, and conditional statements in JavaScript, allowing you to create intricate and visually appealing designs.

Preview: 
        *
      * *
    *   *
  *     *
* * * * *

To create a Hollow Right Triangular Star Pattern in JavaScript, follow these steps:

  1. Start by defining a variable to store the desired number of rows for the pattern.
  2. Implement a loop that iterates from 1 to the specified number of rows.
  3. Within the loop, use a nested loop to print the spaces and stars on each line. The number of spaces on each line corresponds to the current row number minus one, while the stars are printed at the end of the line.
  4. Incorporate conditional statements to determine when to print a space or a star, based on the pattern's requirements.
  5. Incorporate conditional statements to determine when to print a space or a star, based on the pattern's requirements.
By following these steps and customizing the code, you can generate a captivating Hollow Right Triangular Star Pattern in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <=num; i++) {    //first 'for loop' for horizontal lines
        for (let j = 1; j <= (num-i); j++) {    //second 'for loop' to add 'spaces' before pattern
            pattern += "  ";
        }

        for (let k = 1; k <= i; k++) {      //third 'for loop' to add * to pattern string
            if (k==1 || k==i || i==num) {   //third loop condition to make pattern hollow
                pattern += "* ";    //adding outer * to pattern string
            }
            else{
                pattern += "  ";    //adding spaces between * to pattern string
            }
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 7: Downward Right Triangle

The Downward Right Triangular Star Pattern involves printing a series of stars in a right-aligned triangular shape, but in a downward direction. As you progress through the pattern, the number of stars per line decreases incrementally, forming a reversed triangular structure. This pattern presents an excellent opportunity to practice loops, nested loops, and conditional statements in JavaScript.

Preview: 
* * * * *
  * * * *
    * * *
      * *
        *

To create a Downward Right Triangular Star Pattern in JavaScript, follow these steps:

  1. Begin by defining a variable to store the desired number of rows for the pattern.
  2. Implement a loop that iterates from the specified number of rows to 1, decrementing by 1 in each iteration.
  3. Within the loop, use a nested loop to print the appropriate number of spaces at the beginning of each line. The number of spaces is determined by subtracting the current row number from the total number of rows.
  4. Use another nested loop to print the stars on each line. The number of stars on each line corresponds to the current row number.
  5. Display the pattern by printing the spaces and stars on each line, creating the right-aligned downward triangular shape.
By incorporating these steps into your JavaScript code, you can generate captivating Downward Right Triangular Star Patterns.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = num; i >=1; i--) {     //first 'for loop' for horizontal lines and reversed pattern
        for (let j = 1; j <= (num-i); j++) {    //second 'for loop' to add 'spaces' before pattern
            pattern += "  ";
        }

        for (let k = 1; k <= i; k++) {      //third 'for loop' to add * to pattern string
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 8: Downward Hollow Right Triangle

The Downward Hollow Right Triangular Star Pattern involves printing a series of stars in a right-aligned triangular shape while leaving empty spaces within the triangle, all in a downward orientation. This pattern presents an exciting opportunity to practice loops, nested loops, and conditional statements in JavaScript, allowing you to create intricate and visually appealing designs.

Preview: 
* * * * *
  *     *
    *   *
      * *
        *

To create a Downward Hollow Right Triangular Star Pattern in JavaScript, follow these steps:

  1. Start by defining a variable to store the desired number of rows for the pattern.
  2. Implement a loop that iterates from the specified number of rows to 1, decrementing by 1 in each iteration.
  3. Within the loop, use a nested loop to print the appropriate number of spaces at the beginning of each line. The number of spaces on each line is determined by subtracting the current row number from the total number of rows.
  4. Use another nested loop to print the stars and hollow spaces on each line. The stars are printed at the end of the line, while the spaces represent the hollow areas within the triangular shape.
  5. Incorporate conditional statements to determine when to print a space, a star, or a hollow space, based on the pattern's requirements.
  6. Display the pattern by printing the spaces, stars, and hollow spaces on each line, creating the downward hollow right-aligned triangular shape.
By following these steps and customizing the code, you can generate captivating Downward Hollow Right Triangular Star Patterns in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = num; i >=1; i--) {     //first 'for loop' for horizontal lines and reversed pattern
        for (let j = 1; j <= (num-i); j++) {    //second 'for loop' to add 'spaces' before pattern
            pattern += "  ";
        }

        for (let k = 1; k <= i; k++) {      //third 'for loop' to add * to pattern string
            if (i==num || k==1 || k==i) {   //condition to make pattern hollow
                pattern += "* ";    //adding outer * to pattern string
            }
            else{
            pattern += "  ";        //adding spaces between * to pattern string
            }
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 9: Pyramid

The Pyramid Star Pattern involves printing a series of stars in a triangular shape, where each row has an incrementally increasing number of stars from the top to the center, and then a decreasing number of stars from the center to the bottom. This pattern is an excellent opportunity to practice loops, nested loops, and conditional statements in JavaScript.

Preview: 
        *
      * * *
    * * * * *
  * * * * * * *
* * * * * * * * *

To create a Pyramid Star Pattern in JavaScript, follow these steps:

  1. Start by defining a variable to store the desired number of rows for the pattern. This will determine the height and size of the pyramid.
  2. Implement a loop that iterates from 1 to the specified number of rows. This loop will handle the rows of the pyramid.
  3. Within the loop, use another loop to print the appropriate number of spaces at the beginning of each row. The number of spaces is determined by subtracting the current row number from the total number of rows.
  4. Use another nested loop to print the stars on each row. The number of stars on each row corresponds to the current row number multiplied by 2, minus 1.
  5. Display the pattern by printing the spaces and stars on each row, creating the pyramid shape.
By following these steps and customizing the code, you can generate a visually appealing Pyramid Star Pattern in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <= num; i++) {     //first 'for loop' for horizontal lines
        for (let j = 1; j <= (num - i); j++) {    //second 'for loop' to add 'spaces' before pattern
            pattern += "  ";
        }
        for (let k = 1; k <= ((2 * i) - 1); k++) {      //third 'for loop' to add * to pattern string
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 10: Hollow Pyramid

The Hollow Pyramid Star Pattern involves printing a series of stars in a triangular shape, similar to a pyramid, but with empty spaces within the structure. This pattern presents an exciting opportunity to practice loops, nested loops, and conditional statements in JavaScript, allowing you to create intricate and visually appealing designs.

Preview: 
        *
      *   *
    *       *
  *           *
* * * * * * * * *

To create a Hollow Pyramid Star Pattern in JavaScript, follow these steps:

  1. Begin by defining a variable to store the desired number of rows for the pattern. This will determine the height and size of the pyramid.
  2. Implement a loop that iterates from 1 to the specified number of rows. This loop will handle the rows of the pyramid.
  3. Within the loop, use another loop to print the appropriate number of spaces at the beginning of each row. The number of spaces is determined by subtracting the current row number from the total number of rows.
  4. Use another nested loop to print the stars on each row. The stars are printed at the beginning and end of each row, leaving spaces in between. The number of stars on each row is determined by the row number.
  5. Incorporate conditional statements to determine when to print a space, a star, or a hollow space, based on the pattern's requirements. In this case, you will need to print spaces for the internal sections of the pyramid.
  6. Display the pattern by printing the spaces, stars, and hollow spaces on each row, creating the hollow pyramid shape.
By following these steps and customizing the code, you can generate a captivating Hollow Pyramid Star Pattern in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <= num; i++) {    //first 'for loop' for horizontal lines
        for (let j = 1; j <= (num - i); j++) {    //second 'for loop' to add 'spaces' before pattern
            pattern += "  ";
        }
        for (let k = 1; k <= ((2 * i) - 1); k++) {      //third 'for loop' to add * to pattern string
            if (k==1 || k==((2*i)-1) || i==num) {       //condition to make pattern hollow
                pattern += "* ";    //adding outer * to pattern string
            } else {
                pattern += "  ";    //adding spaces between * to pattern string to make it hollow
            }
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 11: Downward Pyramid

The Downward Pyramid Star Pattern involves printing a series of stars in a triangular shape, where each row has a decremental number of stars from the top to the bottom. This pattern presents an exciting opportunity to practice loops, nested loops, and conditional statements in JavaScript, allowing you to create mesmerizing designs.

Preview: 
* * * * * * * * *
  * * * * * * *
    * * * * *
      * * *
        *

To create a Downward Pyramid Star Pattern in JavaScript, follow these steps:

  1. Start by defining a variable to store the desired number of rows for the pattern. This will determine the height and size of the pyramid.
  2. Implement a loop that iterates from the specified number of rows to 1, decrementing by 1 in each iteration. This loop will handle the rows of the pyramid.
  3. Within the loop, use another loop to print the appropriate number of spaces at the beginning of each row. The number of spaces is determined by subtracting the current row number from the total number of rows.
  4. Use another nested loop to print the stars on each row. The number of stars on each row corresponds to the current row number multiplied by 2, minus 1.
  5. Display the pattern by printing the spaces and stars on each row, creating the downward pyramid shape.
By following these steps and customizing the code, you can generate visually appealing Downward Pyramid Star Patterns in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = num; i >=1; i--) {    //first 'for loop' for horizontal lines  and reversed pattern
        for (let j = 1; j <= (num - i); j++) {      //second 'for loop' to add 'spaces' before pattern
            pattern += "  ";
        }
        for (let k = 1; k <= ((2 * i) - 1); k++) {      //third 'for loop' to add * to pattern string
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 12: Downward Hollow Pyramid

The Downward Hollow Pyramid Star Pattern involves printing a series of stars in a triangular shape with empty spaces within the structure. Each row has a decremental number of stars from the top to the bottom, and the hollow spaces create a sense of depth and uniqueness. This pattern presents an exciting opportunity to practice loops, nested loops, and conditional statements in JavaScript, allowing you to create stunning and visually appealing designs.

Preview: 
* * * * * * * * *
  *           *
    *       *
      *   *
        *

To create a Downward Hollow Pyramid Star Pattern in JavaScript, follow these steps:

  1. Begin by defining a variable to store the desired number of rows for the pattern. This will determine the height and size of the pyramid.
  2. Implement a loop that iterates from the specified number of rows to 1, decrementing by 1 in each iteration. This loop will handle the rows of the pyramid.
  3. Within the loop, use another loop to print the appropriate number of spaces at the beginning of each row. The number of spaces is determined by subtracting the current row number from the total number of rows.
  4. Use another nested loop to print the stars, spaces, and hollow spaces on each row. The stars are printed at the beginning and end of each row, while the spaces represent the hollow areas within the pyramid. Incorporate conditional statements to determine when to print a star, a space, or a hollow space, based on the pattern's requirements.
  5. Display the pattern by printing the spaces, stars, and hollow spaces on each row, creating the downward hollow pyramid shape.
By following these steps and customizing the code, you can generate captivating Downward Hollow Pyramid Star Patterns in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = num; i >=1; i--) {    //first 'for loop' for horizontal lines  and reversed pattern
        for (let j = 1; j <= (num - i); j++) {      //second 'for loop' to add 'spaces' before pattern
            pattern += "  ";
        }
        for (let k = 1; k <= ((2 * i) - 1); k++) {      //third 'for loop' to add * to pattern string
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 13: Square

The Square Star Pattern involves printing a grid of stars in the shape of a square, where each side of the square consists of the same number of stars. This pattern provides an excellent opportunity to practice loops and conditional statements in JavaScript, enabling you to unleash your creativity and design captivating square patterns.

Preview: 
* * * * *
* * * * *
* * * * *
* * * * *
* * * * *

To create a Square Star Pattern in JavaScript, follow these steps:

  1. Define a variable to store the desired size of the square, representing the number of rows and columns.
  2. Implement a loop that iterates from 1 to the specified size, handling the rows of the square.
  3. Within the loop, use another loop to print the stars on each row. The number of stars on each row is equal to the size of the square.
  4. Display the pattern by printing the stars on each row, creating a square shape.
By following these steps and customizing the code, you can generate visually appealing Square Star Patterns in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <=num; i++) {    //first 'for loop' for horizontal lines 
        for (let j = 1; j <= (num); j++) {      //second 'for loop' to add * to pattern string
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 14: Hollow Square

The Hollow Square Star Pattern involves printing a grid of stars in the shape of a square, where the border consists of stars, and the interior is left empty, creating hollow spaces. This pattern provides an excellent opportunity to practice loops, conditional statements, and nested loops in JavaScript, enabling you to create intricate and visually appealing designs.

Preview: 
* * * * *
*       *
*       *
*       *
* * * * *

To create a Hollow Square Star Pattern in JavaScript, follow these steps:

  1. Start by defining a variable to store the desired size of the square, representing the number of rows and columns.
  2. Implement a loop that iterates from 1 to the specified size, handling the rows of the square.
  3. Within the loop, use conditional statements to determine whether to print a star or a hollow space. Print a star if it is the first or last row, or if it is the first or last column. Otherwise, print a hollow space.
  4. Display the pattern by printing the stars and hollow spaces on each row, creating a square shape with hollow interiors.
By following these steps and customizing the code, you can generate visually appealing Hollow Square Star Patterns in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <=num; i++) {    //first 'for loop' for horizontal lines
        for (let j = 1; j <= (num); j++) {      //second 'for loop' to add * to pattern string
            if (i==1 || i==num || j==1 || j==num) {     //condition to make pattern hollow
                pattern += "* ";    //adding outer * to pattern string
            } else {
                pattern += "  ";    //adding spaces between * to pattern string to make it hollow
            }
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 15: Crossed Square

The Crossed Square Star Pattern involves printing a grid of stars in the shape of a square, where a cross pattern is formed by stars intersecting the square. This pattern presents an exciting opportunity to practice loops, conditional statements, and nested loops in JavaScript, enabling you to create captivating designs that are both aesthetically pleasing and intellectually stimulating.

Preview: 
* * * * *
* *   * *
*   *   *
* *   * *
* * * * *

To create a Crossed Square Star Pattern in JavaScript, follow these steps:

  1. Start by defining a variable to store the desired size of the square, representing the number of rows and columns.
  2. Implement a loop that iterates from 1 to the specified size, handling the rows of the square.
  3. Within the loop, use conditional statements to determine whether to print a star or an empty space. Print a star if it is the first or last row, or if it is the first or last column. Otherwise, print an empty space.
  4. Additionally, check if the current row and column positions are equal or if the sum of the current row and column positions equals the size plus 1. If either condition is true, print a star to create the crossed pattern.
  5. Display the pattern by printing the stars and empty spaces on each row, forming a square shape with a mesmerizing cross pattern.
By following these steps and customizing the code, you can generate visually appealing Crossed Square Star Patterns in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <=num; i++) {    //first 'for loop' for horizontal lines 
        for (let j = 1; j <= (num); j++) {      //second 'for loop' to add * to pattern string
            if (i==1 || i==num || j==1 || j==num || i==j || j==(num-i+1)) {     //condition to add * to pattern string
                pattern += "* ";    //adding * to pattern string
            } else {
                pattern += "  ";  //adding spaces between * to pattern string to make it crossed
            }
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
    pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 16: Diamond

The Diamond Star Pattern involves printing a grid of stars in the shape of a diamond, with each row having a different number of stars. This pattern provides an excellent opportunity to practice loops, conditional statements, and nested loops in JavaScript, allowing you to create intricate and visually appealing diamond patterns.

Preview: 
        *
      * * *
    * * * * *
  * * * * * * *
* * * * * * * * *
  * * * * * * *
    * * * * *
      * * *
        *

To create a Diamond Star Pattern in JavaScript, follow these steps:

  1. Begin by defining a variable to store the desired size of the diamond, representing the number of rows.
  2. Implement a loop that iterates from 1 to the specified size, handling the upper part of the diamond.
  3. Within the loop, use another loop to print the appropriate number of spaces at the beginning of each row. The number of spaces is determined by subtracting the current row number from the half of the size.
  4. Use another nested loop to print the stars on each row. The number of stars on each row can be calculated by subtracting twice the current row number from the size plus 1.
  5. After printing the upper part of the diamond, implement a similar loop to print the lower part of the diamond. This time, you can iterate from the half of the size minus 1 down to 1.
  6. Display the pattern by printing the spaces and stars on each row, creating a diamond shape.
By following these steps and customizing the code, you can generate visually captivating Diamond Star Patterns in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <= num; i++) {    //first 'for loop' for upward pyramid
        for (let j = 1; j <= ((num) - i); j++) {    //second 'for loop' to add 'spaces' before upward pyramid
            pattern += "  ";
        }
        for (let k = 1; k <= ((2 * i) - 1); k++) {      //third 'for loop' to add * to upward pyramid
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    for (let i = num-1; i >=1; i--) {       //fourth 'for loop' for downward pyramid
        for (let j = 1; j <= ((num) - i); j++) {    //fifth 'for loop' to add 'spaces' before downward pyramid
            pattern += "  ";
        }
        for (let k = 1; k <= ((2 * i) - 1); k++) {      //sixth 'for loop' to add * to downward pyramid
            pattern += "* ";
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
pattern = "Number must be greater than 1 to print star pattern.";
}

Pattern 17: Hollow Diamond

The Hollow Diamond Star Pattern involves printing a grid of stars in the shape of a diamond, where the border consists of stars, and the interior is left empty, creating a captivating hollow effect. This pattern provides an excellent opportunity to practice loops, conditional statements, and nested loops in JavaScript, enabling you to create intricate and visually appealing designs.

Preview: 
        *
      *   *
    *       *
  *           *
*               *
  *           *
    *       *
      *   *
        *

To create a Hollow Diamond Star Pattern in JavaScript, follow these steps:

  1. Begin by defining a variable to store the desired size of the diamond, representing the number of rows.
  2. Implement a loop that iterates from 1 to the specified size, handling the upper part of the diamond.
  3. Within the loop, use conditional statements to determine whether to print a star or an empty space. Print a star if it is the first or last row or if it is the first or last column. Otherwise, print an empty space.
  4. Additionally, check if the current row and column positions are equal to or the sum of the current row and column positions is equal to the size plus 1. If either condition is true, print a star to create the diamond's border.
  5. After printing the upper part of the diamond, implement a similar loop to print the lower part of the diamond. This time, iterate from the size minus 1 down to 1.
  6. After printing the upper part of the diamond, implement a similar loop to print the lower part of the diamond. This time, iterate from the size minus 1 down to 1.
  7. Display the pattern by printing the stars and empty spaces on each row, forming a diamond shape with a mesmerizing hollow interior.
By following these steps and customizing the code, you can generate visually captivating Hollow Diamond Star Patterns in JavaScript.

let num = 5;
let pattern = "";    //pattern string
if (num > 1) {      //no star pattern for 0 or negative numbers.
    for (let i = 1; i <= num; i++) {    //first 'for loop' for upward pyramid
        for (let j = 1; j <= ((num) - i); j++) {    //second 'for loop' to add 'spaces' before upward pyramid
            pattern += "  ";
        }
        for (let k = 1; k <= ((2 * i) - 1); k++) {      //third 'for loop' to add * to upward pyramid
            if (k==1 || k==((2 * i) - 1)) {     //condition to make upward pyramid hollow
                pattern += "* ";    //adding outer * to upward pyramid
            } else {
                pattern += "  ";    //adding 'spaces' between * in upward pyramid
            }
        }
        pattern += "\n";    //new line after row completion
    }
    for (let i = num-1; i >=1; i--) {       //fourth 'for loop' for downward pyramid
        for (let j = 1; j <= ((num) - i); j++) {    //fifth 'for loop' to add 'spaces' before downward pyramid
            pattern += "  ";
        }
        for (let k = 1; k <= ((2 * i) - 1); k++) {      //sixth 'for loop' to add * to downward pyramid
            if (k==1 || k==((2 * i) - 1)) {     //condition to make downward pyramid hollow
                pattern += "* ";    //adding outer * to downward pyramid
            } else {
                pattern += "  ";    //adding 'spaces' between * in downward pyramid
            }
        }
        pattern += "\n";    //new line after row completion
    }
    console.log(pattern);   //printing star to console
}
else {
pattern = "Number must be greater than 1 to print star pattern.";
}

Table of content

Left Triangle Hollow Left Triangle Downward Left Triangle Downward Hollow Left Triangle Right Triangle Hollow Right Triangle Downward Right Triangle Downward Hollow Right Triangle Pyramid Hollow Pyramid Downward Pyramid Downward Hollow Pyramid Square Hollow Square Crossed Square Diamond Hollow Diamond

17 Different types of star pattern programs with JavaScript.

Github

Please checkout my other Github repositories.
Click the link below to explore more projects like this:

Explore »

Sponsored

Want a password generator to quickly generate password for your need.
Try this:

Password Generator »

Error Found

If you found any error or bug in the website, feel free to report it so that I can fix that.

Report Error»
© 2024 JSStarPattern| All Rights Reserved