JavaScript Program to Print Spiral Number 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 spiral number pattern consists of numbers arranged in a spiral form, starting from the top-left corner and spiraling inward in a clockwise direction. This pattern is great for practicing loops, arrays, and conditional logic in JavaScript.

Problem Statement

Create a JavaScript program that:

• Accepts the size of the spiral (a square n x n grid).
• Prints a spiral pattern of numbers starting from 1 and increasing as the spiral progresses.

Example:

• Input: size = 4
• Output:

  1  2  3  4
  12 13 14 5
  11 16 15 6
  10 9  8  7
  

Solution Steps

1. Input the Size of the Grid: The user specifies how many rows and columns the spiral grid should have (n x n).
2. Initialize the Grid: Create a 2D array to hold the numbers.
3. Use Loops to Fill the Spiral: Use loops and logic to fill the grid with numbers in a spiral pattern.
4. Display the Spiral: After filling the grid, print the numbers in the correct format.

JavaScript Program

// Step 1: Input the size of the spiral (n x n)
let n = parseInt(prompt("Enter the size of the spiral: "));

// Step 2: Initialize the n x n grid with zeros
let spiral = new Array(n).fill(0).map(() => new Array(n).fill(0));

// Step 3: Initialize variables for boundaries and number
let num = 1;
let top = 0, bottom = n - 1, left = 0, right = n - 1;

// Step 4: Fill the grid in a spiral pattern
while (top <= bottom && left <= right) {
    // Move from left to right across the top row
    for (let i = left; i <= right; i++) {
        spiral[top][i] = num++;
    }
    top++;

    // Move from top to bottom along the right column
    for (let i = top; i <= bottom; i++) {
        spiral[i][right] = num++;
    }
    right--;

    // Move from right to left across the bottom row
    if (top <= bottom) {
        for (let i = right; i >= left; i--) {
            spiral[bottom][i] = num++;
        }
        bottom--;
    }

    // Move from bottom to top along the left column
    if (left <= right) {
        for (let i = bottom; i >= top; i--) {
            spiral[i][left] = num++;
        }
        left++;
    }
}

// Step 5: Print the spiral pattern
for (let i = 0; i < n; i++) {
    console.log(spiral[i].join(' '));
}

Explanation

Step 1: Input the Size of the Grid

• The program begins by asking the user for the size of the spiral (number of rows and columns). The input is converted to an integer using parseInt().

Step 2: Initialize the Grid

• A 2D array (spiral) is created with n x n dimensions, and all elements are initialized to 0.

Step 3: Initialize Boundaries and Number

• The num variable starts from 1 and increments as the spiral is filled.
• The top, bottom, left, and right variables define the boundaries of the current layer of the spiral.

Step 4: Fill the Grid in a Spiral Pattern

• The while loop continues as long as the boundaries haven't crossed.
  • The first for-loop fills the top row from left to right.
  • The second for-loop fills the right column from top to bottom.
  • The third for-loop fills the bottom row from right to left (if needed).
  • The fourth for-loop fills the left column from bottom to top (if needed).
  • After each movement, the corresponding boundary is adjusted.

Step 5: Print the Spiral Pattern

• The filled spiral array is printed row by row using console.log().

Output Example

For size = 4, the output will be:

1  2  3  4
12 13 14 5
11 16 15 6
10 9  8  7

For size = 5, the output will be:

1  2  3  4  5
16 17 18 19 6
15 24 25 20 7
14 23 22 21 8
13 12 11 10 9

Conclusion

This JavaScript program prints a spiral pattern of numbers in an n x n grid using nested loops and boundary logic. The numbers are filled in a spiral order (left to right, top to bottom, right to left, and bottom to top). This exercise is useful for practicing loops, array manipulation, and conditional logic 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