JavaScript Program to Print Square Star Pattern

In this article, we are going to discuss how we can make a square star pattern. we have to print "*" in the console in such a way that it turns or looks like a solid square. we can use loops in different manners for this pattern.

Example:

Input: 4
Output: * * * *
               * * * * 
               * * * * 
               * * * * 
Input: 3
Output: * * * 
               * * *
               * * *

These are the following ways to print a square star pattern in the console:

• Using nested for loop
• Using for loop
• Using String Repeat Method
• Using Array and Join Method
• Using ES6 Repeat and Template Literal

Using nested for loop

In this approach, we are using for loop in a nesting way, if n= 4 then the star must be 4*4 which is 16 so that it can make perfect square. The outer loop will decide the row and inner loop will decide the column. For each row, the "line" variable adds one star and some spaces.

Example: It describes how we can print a square pattern star in the console using nested for loop

// Function for printing 
// star square pattern
// in console

function printSquare(size) {
    for (let i = 1; i <= size; i++) {
        let line = "";
        for (let j = 1; j <= size; j++) {
            line += "*  ";
        }
        console.log(line);
    }
}

// Square pattern size variable
let patternSize = 5;

// Calling function for pattern printing 
printSquare(patternSize);

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

Time complexity: O(N²)

Space complexity: O(1)

Using for loop

In this approach we are creating two separate loops, first loop will add n(size of square) stars in a "line" variable for each row and the second loop will print that "line" variable n(size of square) times.

Example: It describes how we can print a square pattern star in the console using for loop

// Creating variable
let line = "";
// Function for printing square star pattern
function square(n) {
    // First loop for row
    for (let i = 1; i <= n; i++) {
        line += "*  ";
    }
    // Second loop for column
    for (let j = 1; j <= n; j++) {
        console.log(line);
    }
}

let size = 5;
// Calling function for printing pattern
square(size);

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

Time complexity: O(N)

Space complexity: O(1)

Using String Repeat Method

In this approach we are using "repeat()" inbuilt function of JavaScript which takes single argument, which is the number of times the string should be repeated. In a custom function after using repeat() function we need to print that string into the console for that we are using for loop which iterates n(size) times and creating square pattern in console.

Example: It describes how we can print a square pattern star in the console using String reapeat method

// Function for printing square pattern
function printSquare(n) {
    const row = "*  ".repeat(n);
    // For loop
    for (let i = 0; i < size; i++) {
        console.log(row);
    }
}
let size = 5;
// Calling function printSquare
printSquare(size);

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

Time complexity: O(N)

Space complexity: O(1)

Using Array and Join Method

In this approach we are using Array and "fill()" function which is used to fill all the value provided in the argument into the array. After that we are using for loop for printing out that array into the console n(size of square) times.

Example: It describes how we can print a square pattern star in the console using array and join method

// Javascript program for
// printing square of stars
// in console

function printSquare(n) {
    const rowArray = Array(n).fill('*');
    for (let i = 0; i < size; i++) {
        console.log(rowArray.join(' '));
    }
}

// Calling fucntion
let size = 5;
printSquare(size); 

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

Time complexity: O(N)

Space complexity: O(1)

Using ES6 Repeat and Template Literals:

In this approach we are using template literal along with "repeat()" function. Creating a variable and storing the value produced by reapeat function and then again letting another variable "square", In which template literal is used. `${row}\n` is used to dynamic access of row variable and "\n" is for new line. it creates a string where the content of row appears followed by a line break. After that we are printing that variable in console.

Example: It describes how we can print a square pattern star in the console using ES6 repeat and template literals

// Javascript program for
// printing square of stars
// in console

let size = 3;
const rowOfSquare = '* '.repeat(size);

// Using template literal
// \n is used for next line

const square = `${rowOfSquare}\n`.repeat(size);

// Printing square
console.log(square);

* * * 
* * * 
* * *