JavaScript Program to Print Zig-Zag Star Pattern

Introduction

A zig-zag star pattern is a series of stars (*) arranged in a zig-zag shape across a grid. This pattern involves alternating rows with stars placed at different positions, creating a zig-zag appearance. It is a great exercise for practicing loops and conditional logic in JavaScript.

Problem Statement

Create a JavaScript program that:

• Accepts the number of rows and columns.
• Prints a zig-zag star pattern.

Example:

• Input: rows = 3, columns = 9
• Output:

    *     *
   * *   * *
  *   * *   *
  

Solution Steps

1. Input the Number of Rows and Columns: The user specifies how many rows and columns the pattern should have.
2. Use Nested Loops: The outer loop handles the rows, and the inner loop handles printing the stars and spaces in a zig-zag manner.
3. Conditionally Print Stars: Print stars at specific positions for each row, using alternating patterns for the zig-zag effect.

JavaScript Program

// Step 1: Input the number of rows and columns for the zig-zag pattern
let rows = parseInt(prompt("Enter the number of rows: "));
let columns = parseInt(prompt("Enter the number of columns: "));

// Step 2: Outer loop for rows
for (let i = 1; i <= rows; i++) {
    let output = '';
    
    // Step 3: Inner loop for columns
    for (let j = 1; j <= columns; j++) {
        // Step 4: Conditionally print stars for the zig-zag pattern
        if ((i + j) % 4 === 0 || (i === 2 && j % 4 === 0)) {
            output += '*';
        } else {
            output += ' ';
        }
    }
    
    // Print the output for the current row
    console.log(output);
}

Explanation

Step 1: Input the Number of Rows and Columns

• The program starts by asking the user to input the number of rows and columns for the zig-zag pattern. These inputs are converted to integers using parseInt().

Step 2: Outer Loop for Rows

• The outer loop controls how many rows are printed. It runs from 1 to rows.

Step 3: Inner Loop for Columns

• The inner loop controls how many columns are printed for each row. It runs from 1 to columns.

Step 4: Conditionally Print Stars

• Stars (*) are printed at positions where the condition (i + j) % 4 === 0 is true, or in the middle row where i === 2 and j % 4 === 0 for columns.
• This conditional ensures that stars are printed in a zig-zag pattern.

Step 5: Output the Row

• After constructing the row, it is printed using console.log().

Output Example

For rows = 3 and columns = 9, the output will be:

  *     *
 * *   * *
*   * *   *

For rows = 3 and columns = 12, the output will be:

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

Conclusion

This JavaScript program prints a zig-zag star pattern using nested loops and conditional logic. Stars are printed at specific positions to create a zig-zag effect, while spaces are printed elsewhere. This exercise helps in practicing loop control, conditional statements, and formatting output in JavaScript.