Spiral Matrix in Javascript
Tags: javascript, webdev, programming, coding
Published: 2022-04-16 18:45:14

This is one interesting interview question.

Generally, we know the matrix of any size but what is special about Spiral here. 

2 * 2 Matrix can be:

[[1,2],
 [3,4]]

So, it spiral version is:

[[1,2],
 [4,3]]

3 * 3 Matrix can be:
[[1,2,3],
 [4,5,6],
 [7,8,9]]

So, it's spiral version is:
[[1,2,3],
 [8,9,4],
 [7,6,5]]

An image can explain better rather much long theories. I tried it using below image.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4il8z2frtfz50zbl2la1.png)

Ok. Now, I implemented this using javascript. 

Here, is the code:
```
function spiralMatrix(n) {
    const arr = Array.from({ length: n }, () => []);
    let row = 0;
    let col = 0;
    let rowEnd = n - 1;
    let colEnd = n - 1;
    let counter = 1;
    while (col <= colEnd && row <= rowEnd) {
        
        // Top row & middle value (Where col === colEnd && row === rowEnd)
        for (let i = col; i <= colEnd; i++) {
            arr[row][i] = counter;
            counter++;
        }
        row++;
        
        // end column
        for (let i = row; i <= rowEnd; i++) {
            arr[i][colEnd] = counter;
            counter++;
        }
        colEnd--;

        // end row
        for (let i = colEnd; i >= col; i--) {
            arr[rowEnd][i] = counter;
            counter++;
        }
        rowEnd--;

        // First col from end
        for (let i = rowEnd; i >= row; i--) {
            arr[i][col] = counter;
            counter++;
        }
        col++;
    }
    return arr;
}
```


I would love to explain how I achieved it. 

Here is the GIF that makes you get the Pseudo code behind this code.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtizd0hfbehj2jp05ctp.gif)


Meanwhile, If some expert came across this article. Please do minify the above code.

Thanks.



<hr style="border-width: 2px;border-color: #87CEEB;">
<h1> 💎 Love to see your response</h1>
<ol>
<li style="padding: 10px;font-size: 30px;"><b>Like</b> - You reached here means. I think, I deserve a like.  </li>
<li style="padding: 10px;font-size: 30px;"><b>Comment</b> - We can learn together. </li>
<li style="padding: 10px;font-size: 30px;"><b>Share</b> - Makes others also find this resource useful.</li>
<li style="padding: 10px;font-size: 30px;"><b>Subscribe / Follow</b> - to stay up to date with my daily articles. </li>
<li style="padding: 10px;font-size: 30px;"><b>Encourage me</b> - <a href="https://www.buymeacoffee.com/urstrulyvishwak" target="_blank">You can buy me a Coffee</a>
</ol>
<hr style="border-width: 2px;border-color: #87CEEB;">

<h2> Let's discuss further. </h2>

<ol style="padding: 20px;">
<li style="padding: 10px;font-size: 30px;">Just DM <br> <a href="https://twitter.com/messages/compose?recipient_id=1388837509824610314&text=Hello world"
class="twitter-dm-button" data-screen-name=“@urstrulyvishwak” data-size="large">@urstrulyvishwak</a>
</li>
<li style="padding: 10px;font-size: 30px;">
<p> Or mention <br> <a href="https://twitter.com/intent/tweet?screen_name=urstrulyvishwak&ref_src=twsrc^tfw" class="twitter-mention-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">@urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> </li>
</ol>

<h2> For further updates: </h2>
<a href="https://twitter.com/urstrulyvishwak?ref_src=twsrc^tfw" class="twitter-follow-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">Follow @urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>