How to Unroll a Matrix: a Look into a Common Interview Question

3 min readMay 19, 2020

I am a recent graduate of the Flatiron School Denver Software Engineering Immersive. In the last few weeks, I have been practicing my problem solving skills and have recently taken a mock technical interview. In this blog post, I would like to go through the problem solving process for a common technical interviewing question.

The Problem

Consider the following array of arrays representing a matrix,

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

Write a function that unrolls this matrix such that the result is,

unroll(matrix) = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]

This function should be applicable to any array of N arrays of size (1 X N).

Step 1: Clarify the Problem

This is an opportunity to vocalize the problem to the interviewer and show your thought process. In clarifying the problem, consider ambiguities and edge cases. You can also given an example of the input and output. In this case, an example is given. The process of unrolling the matrix is clarified, “So, unrolling the matrix refers to starting at 1 and spiraling inward to 16”. Like a cinnamon roll…

Step 2: Solve the Problem

Break down the process of “unrolling” the matrix. First, the first array is removed and stored.

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

Next, the last element of each array is removed and stored into the result array.

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

Next, the last array is removed and the elements are stored into the result array in reverse order.

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

Next, the first element of each array is removed and stored in result array starting from the last array.

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

This process is then repeated until all the elements are transferred to the result array. We can now translate this into code.

Step 3: Translate the solution to code

First, the first array is removed and stored in the result array:

result.push(...matrix.shift())

Next, the last element of each array is removed and stored in the result array:

for(let i = 0; i < matrix.length; i++) {
   array = matrix[i]
   result.push(array.pop())
}

Next, the last array is removed and stored in the result array in reverse order:

result.push(...matrix.pop().reverse())

Next, the first element of each array is removed and stored in the result array starting from the last array:

for(let j = matrix.length - 1; j >= 0; j--) {
   array = matrix[j]
   result.push(array.shift())
}

Combining it all together, the unroll function is called recursively by passing in the reduced matrix and the result array. The base case is when the length of the updated matrix is zero. The function is called using an empty initial result array.

function unroll(matrix, result) {
  let array
  if(matrix.length === 0) {
    return result
  }
  result.push(...matrix.shift())
  for(let i = 0; i < matrix.length; i++) {
    array = matrix[i]
    result.push(array.pop())
  }
  result.push(...matrix.pop().reverse())
  for(let j = matrix.length - 1; j >= 0; j--) {
    array = matrix[j]
    result.push(array.shift())
  }
  return unroll(matrix, result)
}result = unroll(matrix, [])

Conclusion

In conclusion, the problem solving process can and should be used for every technical question whether it is during the interview process or on the job. It is a rewarding process to clarify the problem and solve the problem before writing a single line of code. Getting into the habit of looking for edge cases, ambiguities, and laying out your thought process is a vital skill. Definitely a skill that I am still learning every day.

How to Unroll a Matrix: a Look into a Common Interview Question

Written by Evan Greer