# Unravelling the Matrix Array.

## Rules of the Challenge

Given an array matrix, unroll the array in clockwise rotation.

`// Sample Array (4 x 4 matrix)//  1  2  3  4//  12 13 14 5//  11 16 15 6//  10 9  8  7matrix = [[1, 2, 3, 4], [12, 13, 14, 5], [11, 16, 15, 6], [10, 9, 8, 7]]// expected output[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]`

## Step 1

Before coding anything I immediately grabbed a pen and paper and drew out the matrix array. I drew a spiral and thought, what do I need to do to grab these numbers in this order.

## Step 2

Once I thought I had the logic figured out I started planning out my code.

`function unrollMatrix(matrix){    // grab top row    // grab right column    // grab bottom row and reverse it    // grab left column and reverse it}`

## Step 3

How to grab the top row…

`function unrollMatrix(matrix){   let unrolled = []// grab top row   unrolled = [...unrolled, matrix.shift()]// grab right column// grab bottom row and reverse it// grab left column and reverse it}`

## Step 4

Ok… now the right column.

`function unrollMatrix(matrix){    let unrolled = []// grab top row    unrolled = [...unrolled, matrix.shift()]// grab right column    unrolled = [...unrolled, matrix.map(row => row.pop())]// grab bottom row and reverse it// grab left column and reverse it}`

## Step 5

So now I have [ [ 1, 2, 3, 4 ], [ 5, 6, 7 ] ]. Not exactly the expected output but I can flatten it later. Moving on to the bottom row. I can pop the last index, but then I have to reverse it.

`function unrollMatrix(matrix){    let unrolled = []// grab top row    unrolled = [...unrolled, matrix.shift()]// grab right column    unrolled = [...unrolled, matrix.map(row => row.pop())]// grab bottom row and reverse it    unrolled = [...unrolled, matrix.pop().reverse()]// grab left column and reverse it}`

## Step 6

Almost there. unrolled at this point = [ [ 1, 2, 3, 4 ], [ 5, 6, 7 ], [ 8, 9, 10 ] ]. Now to grab the left column. Just like I did the right column, I could do the left column and then reverse it.

`function unrollMatrix(matrix){    let unrolled = []// grab top row    unrolled = [...unrolled, matrix.shift()]// grab right column    unrolled = [...unrolled, matrix.map(row => row.pop())]// grab bottom row and reverse it    unrolled = [...unrolled, matrix.pop().reverse()]// grab left column and reverse it     unrolled = [...unrolled, matrix.map(row => row.shift()).reverse()]}`

## Step 7

So now that I’m grabbing everything in a spiral, I just have to keep repeating this process until its done. What came to my mind was to create a while loop that will repeat until there’s nothing left in the matrix array and everything is in the new unrolled array. Also need to fix the output so I’ll flatten the return.

`function unrollMatrix(matrix){let unrolled = []while (matrix.length > 0) {// grab top row    unrolled = [...unrolled, matrix.shift()]// grab right column    unrolled = [...unrolled, matrix.map(row => row.pop())]// grab bottom row and reverse it    unrolled = [...unrolled, matrix.pop().reverse()]// grab left column and reverse it    unrolled = [...unrolled, matrix.map(row => row.shift()).reverse()]}return unrolled.flat()}`

--

--

## More from Alex Duterte

Fullstack Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.