JavaScript Program to Print Spiral Number Pattern

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.

Comments

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel

Subscribe to my YouTube Channel (165K+ subscribers):
Java Guides Channel

Top 10 My Udemy Courses with Huge Discount:
Udemy Courses - Ramesh Fadatare