If at first you don't solve a matrix, loop and loop again

A matrix is a set of digits organized in rows in columns. They can be used for game boards, to track data, and to torture students in Alg II (just kidding about that last part).

Usually, matrix rows are represented by i, and columns are represented by j. To access a specific value in a matrix, one can use the notation Matrix[i][j]. This is a standard mathematical concept, and immediately brought to mind nested for loops.

In Javascript, this might look like:

function printMatrixValues(matrix){
    for(let i = 0; i < matrix.length; i++{
        for(let j=0; j < matrix[i]; i++{
            console.log(matrix[i][j])
        }
    }
}

Here, the first loop goes through the rows of the matrix. The second loop then looks at each cell in the row. In other words, in the first iteration the loop will print matrix[0][0], the first number of the first row. In the second iteration, the function will print matrix[0][1], the second number in the first row, and so on.

Matrices have many real-world examples, such as Gaussian blur and Minesweeper.

Example

Let’s take a look at a matrix algorithm from Code Signal.

Since Halloween is upon us, the hotel your group wants to stay at is haunted. All of the haunted rooms are represented by 0 in the matrix.The members of your group don’t want to stay in the haunted room OR in the rooms directly below the haunted rooms (which are also haunted).

matrix = [[0, 1, 1, 2], 
          [0, 5, 0, 0], 
          [2, 0, 3, 3]]

Let’s say that you want to calculate the total cost of the all the non-haunted rooms.

First, you’ll need to keep track of the total.

let total = 0 

Then, you'll need to loop through each row.

for (let i=0; i<matrix.length; i++){
    for (let j=0; j<matrix[i].length; j++){
    }
}

Then, within in the j for loop, we’ll check if the the cell at matrix[i][j] is 0.

if (matrix[i][j] === 0) 

If it is 0, we won’t add it to the total. However, we also don’t want to add whatever is directly underneath it to the total either.

How can we achieve this?

We know that each row is represented by matrix[i] in our function. Wouldn’t matrix[i + 1] be the next row down?

We’ll need to iterate through another for loop to get that value. Since we don’t want to add it to the total, we’ll just set whatever number is directly underneath a haunted room to 0 as well.

for (let k=i+1; k<matrix.length; k++){
          matrix[k][j] = 0;

Now, our matrix looks something like this.

matrix = [[0, 1, 1, 2], 
          [0, 5, 0, 0], 
          [0, 0, 0, 0]]

All we have left to do is add up the numbers in each row.

Again, we’ll use a nested for loop to achieve this.

for (let x=0; x<matrix.length; x++){
    for (let y=0; y<matrix[x].length; y++){
      total += matrix[x][y]
    }
  }

Finally, we’ll return the total.

return total 

Conclusion

Matrix problems may seem intimidating at first, but being able to traverse them with nested for loops opens up lot of opportunities. While the triply nested for loop is not the most optimized solution, it helps us step through the problem one row at a time, and allows us to change the cells in our rows as well.

Matrix problems are all over the place in web development. For example, when you justify text, we are creating a matrix of words and spaces. Next time you encounter a matrix problem, remember to step through it and use a nested for loop to quickly gain access to the cells.