Print Spiral Pattern in JavaScript

Web development is going popular every passing day, and in this journey of the web, development javascript plays the most important role. Though javascript is used to make websites dynamic one can also create fun programs.  So in today’s article, we will create a program to Print Spiral Pattern in JavaScript. With the help of this program, you will be able to print a spiral pattern of integers. Practising these types of questions also helps to get an upper edge in Competitive Programming.

What’s The Approach?

Firstly we will CREATE A 2D ARRAY with `size n`.

Next, we will create variables to store the boundary of the array and the size left to print the spiral.

Also, we are going to create a char variable to store the movement of the spiral pattern. It is like ` ‘r’ for right, ‘l’ for left, ‘d’ for down, and ‘u’ for up`.

Now we will `execute a loop from 1 to n*2` and will fill up the array in a spiral pattern.

Also Read: How to Run Javascript in Visual Studio Code on Mac OS Big Sur

Javascript Program To Print Spiral Pattern

Input:

` n = 5`

Output:

``````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

``````
```<script>

function printSpiral(size)
{

// Create row and col
// to traverse rows and columns
let row = 0, col = 0;

let boundary = size - 1;
let sizeLeft = size - 1;
let flag = 1;

// Variable to determine the movement
// r = right, l = left, d = down, u = upper
let move = 'r';

// Array for matrix
let matrix = new Array(size);
for(let i = 0; i < size; i++)
{
matrix[i] = new Array(size).fill(0);
}

for(let i = 1; i < size * size + 1; i++)
{

// Assign the value
matrix[row][col] = i;

// switch-case to determine
// the next index
switch (move)
{

// If right, go right
case 'r':
col += 1;
break;

// If left, go left
case 'l':
col -= 1;
break;

// If up, go up
case 'u':
row -= 1;
break;

// If down, go down
case 'd':
row += 1;
break;
}

// Check if the matrix
// has reached array boundary
if (i == boundary)
{

// Add the left size for the
// next boundary
boundary += sizeLeft;

// If 2 rotations has been made,
// decrease the size left by 1
if (flag != 2)
{
flag = 2;
}
else
{
flag = 1;
sizeLeft -= 1;
}

// switch-case to rotate the movement
switch (move)
{

// If right, rotate to down
case 'r':
move = 'd';
break;

// If down, rotate to left
case 'd':
move = 'l';
break;

// If left, rotate to up
case 'l':
move = 'u';
break;

// If up, rotate to right
case 'u':
move = 'r';
break;
}
}
}

// Print the matrix
for(row = 0; row < size; row++)
{
for(col = 0; col < size; col++)
{
let n = matrix[row][col];
if (n < 10)
document.write(n + " ");
else
document.write(n + " ");
}
document.write("<br>");
}
}

// Driver Code

// Get the size of size
let size = 5;

// Print the Spiral Pattern
printSpiral(size);

</script>
```

Ethix

I'm a coding geek interested in cyberspace who loves to write and read