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.