How to Unroll a Matrix Array
In a recent code challenge, I was asked to unroll an NxN matrix array in a clockwise rotation. For anyone unfamiliar with what that means, here’s what I was presented with:
From what I understood immediately, I had to access:
● the first array
● the last elements on the right
● the last array in reverse order
● the first elements of the remaining arrays
● repeat steps
Here’s a better visual:
Note: I will explain ONE solution and provide a link to ANOTHER solution. The first (below) returns all of the elements in the array of arrays but not in an array form. It will console.log the elements section by section. This was accepted as a solution during my code challenge, but if you seek to return all the elements in a flattened array, scroll to the bottom of this article.
Before I began, I thought of an exit condition. We wouldn’t want the function to run if the length of the matrix array was 0. So, I used:
if(matrix.length === 0) return;From there, the interviewer asked me to consider whether I wanted to use destructive or non-destructive methods on each subarray. At first, I thought it would be more advantageous to preserve each array in its original state, but as I got more in the weeds, I thought otherwise. Let’s get into it.
Step 1: Grab the TOP row
Since I knew I would be removing the top row (the first element of the outer array), I decided to use the destructive .shift array method. However, since I only wanted the values inside that array, not the entire array [], I used the spread operator … .
console.log(…matrix.shift())That outputs: 1 2 3 4
Step 2: Grab the RIGHT column
Without the first row, we’re left with the last three subarrays. So, I knew I only needed to grab 5, 6, and 7. How do we destructively access the last element in an array? .pop()
Since I would need to do the same for all three arrays, I decided to map over them, again using the spread operator to lift only the single value from each array.
console.log(…matrix.map(arrayEle => arrayEle.pop()))That got me: 5, 6, 7
Step 3: Grab the BOTTOM row
Now the last row. Since these numbers are in reverse order, I first popped them and then called .reverse().
console.log(…matrix.pop().reverse())Output: 8, 9, 10
Step 4: Grab the LEFT column
This is very similar to what we did for the right column, but instead we use the destructive array method for removing the first element in an array: .shift(). And since we’re dealing with two arrays, we map over them. Don’t forget to call .reverse(), since the numbers will print in opposite order otherwise.
console.log(…matrix.map(arrayEle => arrayEle.shift()).reverse())Result: 11, 12
Step 5: Recursion
At this point you can use some recursion to have the function repeat the first steps until it’s left with no remaining values.
unroll(matrix)
That outputs:
13, 14
15
16
When you run the entire function, you should see this:
Second Solution
https://medium.com/@alexduterte/unravelling-the-matrix-array-53e6cad58815
