JavaScript Program to Print Zig-Zag Star Pattern

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.