DEV Community is a community of 557,027 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Introduction

You are The One... who will learn to unroll a matrix. I'm not Morpheus, but we're still going to be doing some pretty cool stuff in a virtual world today. 😉 Let's dive in!

The Matrix

Take a look at this array of arrays...

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

The idea behind `matrix` is to unroll all the numbers in order using a series of operations. Your output being:
`1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16`

So, how would we accomplish this? Maybe we should break down the process logically. So far we know that the first move should count each element in the first array. The next should count the last element in each array. Afterwards, the bottom array should be mapped backwards. So on and so forth... You get where this is going!

Check out the blueprint:

``````function unroll(matrix){
// top

// right side

// bottom in reverse

// left side
}
``````

First move

To make this a succinct process, we are going to be using the spread operator in every step. If you need a refresher on how the spread operator works, here is a link to a great resource.

``````function unroll(matrix){
// top
console.log(...matrix.shift())
// right side

// bottom in reverse

// left side
}
``````

We are using the `shift()` tool to return the first array within matrix, `[1, 2, 3, 4]`. The spread operator allows us to receive this information as `1 2 3 4`. Simple enough, right?

Second move

``````function unroll(matrix){
// top
console.log(...matrix.shift())
// right side
console.log(...matrix.map(arr => arr.pop()))
// bottom in reverse

// left side
}
``````

In this step, we are mapping over each array of arrays and using the `.pop()` tool to receive the very last number in each array. This returns `5 6 7`.

Third move

``````function unroll(matrix){
// top
console.log(...matrix.shift())
// right side
console.log(...matrix.map(arr => arr.pop()))
// bottom in reverse
console.log(...matrix.pop().reverse())
// left side
}
``````

Looks a bit similar to our first move, right? Except this time, we are using both the `.pop()` and `.reverse()` method to get the values of the very last array in numerical order. Without `.reverse()`, we would get `10 9 8 7` instead. No bueno!

Last move

``````function unroll(matrix){
// top
console.log(...matrix.shift())
// right side
console.log(...matrix.map(arr => arr.pop()))
// bottom in reverse
console.log(...matrix.pop().reverse())
// left side
console.log(...matrix.map(arr => arr.shift().reverse())
}
``````

Ahh, sweet order. It all makes sense now! We are mapping over each remaining array and pulling the first number off in `.reverse()`! Wonderful. But, there's something missing here... Something dynamic.

We as developers don't want to rewrite these steps whenever we encounter a much larger matrix. Given the fact that we still have a small matrix left...

``````let matrix = [[13, 14
[16, 15]];
``````

How do we finish it off? Why, recursion of course!

``````function unroll(matrix){
// top
console.log(...matrix.shift())
// right side
console.log(...matrix.map(arr => arr.pop()))
// bottom in reverse
console.log(...matrix.pop().reverse())
// left side
console.log(...matrix.map(arr => arr.shift().reverse())

unroll(matrix)
}
``````

If we stopped here, we would still have one more problem. An infinite loop. In order for us to stop that from happening, we just need to include a condition that will break the loop when there is no `length` to our matrix left. Check it out:

``````function unroll(matrix){
if(matrix.length === 0) return;

// top
console.log(...matrix.shift())
// right side
console.log(...matrix.map(arr => arr.pop()))
// bottom in reverse
console.log(...matrix.pop().reverse())
// left side
console.log(...matrix.map(arr => arr.shift().reverse())

unroll(matrix)
}
``````

Conclusion

This is by far the most fun coding challenge I have ever had. I have had my fair share of them, but this one almost felt like a video game! If you liked this blog, hit that follow button!

Also, you should connect with me. 😉