JavaScript Program to Print Zig-Zag Star Pattern

🎓 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 (178K+ 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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF