Today I had a JavaScript mock interview from Skilled. With Skilled you can get a mock interview with an expert and get personalized feedback that will help you prepare for a real interview. This was a technical interview where I was asked a couple of questions to test my knowledge of JavaScript and a pair programming exercise. The feedback was great and the questions and problems that were given to me were interesting. There was one problem we worked on that I thought was interesting so I wanted to share how I approached it.

The Problem

const myMatrix = \[\[1, 2, 3, 4\],  
                 \[12, 13, 14,5\],  
                 \[11, 16, 15, 6\],  
                 \[10, 9, 8, 7\]\]

If you count the numbers in this matrix in order you will see that they form a spiral pattern. The objective is to create a function that will “uncurl” the spiral and console log the numbers in the spiral order. It is perfectly allowed to modify the array but you can’t use sort method. This is because the numbers are just for showing the pattern but if the they were random the solution would still console log the numbers in the spiral pattern. Also the solution can be reached by calling console log multiple times.

My Approach

So first I had to think whether the matrix needed to be modified. I decided that I would remove elements from the matrix and console log them. This way it would be easier to keep track of the remaining elements. So I broke it down into a few steps. First I would work with the top of the spiral, then the right side, then the bottom and finally the left side. I wrote a function with a few comments like this.

function uncurl() {

  // console log the top

  //console log the right side

  //console log the bottom

  //console log the left

}

So first step is to console log the top. Since I am removing the element from the array I immediately thought about using the shift method. This will remove the first element from the matrix and return it. Then in order to console log every element instead of the array I used the spread operator. This is what it looks like

function uncurl() {

  // console log the top

  console.log(...myMatrix.shift())

  //console log the right side

  //console log the bottom

  //console log the left  
}

Step one is done! Next step is the right side. So we have to go over each element in the matrix and remove the last element from it and console log it. I decided to use the map method to go over each array and use the pop method to remove the last element. Since this will return an array of numbers I also used the spread operator. This is what the second step looks like.

function uncurl() {

  // console log the top

  console.log(...myMatrix.shift())

  //console log the right side

  console.log(...myMatrix.map(item => item.pop()))

  //console log the bottom

  //console log the left  
}

So far so good! I thought of the bottom of the spiral as the opposite process of the top. Instead of the shift I would have to use pop and to get the numbers in the right order I would have to use the reverse method. This is what I ended up with.

function uncurl() {

  // console log the top

  console.log(...myMatrix.shift())

  //console log the right side

  console.log(...myMatrix.map(item => item.pop()))

  //console log the bottom

  console.log(...myMatrix.pop().reverse())

  //console log the left  
}

I think you are starting to see the pattern. The left side is going to be the opposite of the right side but in reverse. So we are going to be using map, shift and reverse on this side. Here is the result.

function uncurl() {

  // console log the top

  console.log(...myMatrix.shift())

  //console log the right side

  console.log(...myMatrix.map(item => item.pop()))

  //console log the bottom

  console.log(...myMatrix.pop().reverse())

  //console log the left

  console.log(...myMatrix.map(item => item.shift()).reverse())

}

Now there is a problem. There are still some numbers left after the first pass. The code so far doesn’t allow us to go through all the numbers. There are a couple of ways this can be done. We can use a loop to go through the matrix until the it is empty. I decided to use recursion instead. So the code will run and at the end it will be called again only if the length of the matrix is not equal to 0. This is what that looks like.

const myMatrix = \[\[1, 2, 3, 4\],  
                 \[12, 13, 14,5\],  
                 \[11, 16, 15, 6\],  
                 \[10, 9, 8, 7\]\]

function uncurl() {

  // console log the top

  console.log(...myMatrix.shift())

  //console log the right side

  console.log(...myMatrix.map(item => item.pop()))

  //console log the bottom

  console.log(...myMatrix.pop().reverse())

  //console log the left

  console.log(...myMatrix.map(item => item.shift()).reverse())

  if (myMatrix.length === 0) {

    return

  }

  uncurl()

}

Perfect! The code works. This was a problem that was on the easy side but it was a perfect practice on breaking problems down into smaller steps. I found it very interesting and rewarding. Next thing I will try is to find different ways to reach the solution. Happy coding everyone! 😎