Matrix Traversal in TypeScript

Introduction

Hello, advancing coder! Are you excited to dive into a new, intriguing challenge? In this lesson, we're going to explore special traversals of matrices . Matrices are rectangular 2D arrays where we traverse through rows and columns. We'll find our way through a matrix by climbing up and down the columns, zigzagging as we go. Sound exciting? Buckle up, then, and get ready!

Task Statement

Here's the task: you've been given a 2D array consisting of individual cells, each holding a unique integer value. Your goal is to create a function that will traverse this matrix, starting at the bottom-right cell. From there, you'll travel up to the top of the same column, then move left to the next column, and then continue downward from the top of this new column. After reaching the bottom of the column, you again move left and start moving upward. This unique traversal pattern will be performed until all the cells have been visited. Consider this small 3x4 matrix as an example: TypeScript const matrix: number[][] = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]; With the described traversal pattern, your function should return this list: [12, 8, 4, 3, 7, 11, 10, 6, 2, 1, 5, 9] .

Step 1: Initialize and Understand Matrix Dimensions

The first step toward a solution is understanding the dimensions of the matrix that we're working with. We can do this using array properties. Let's set up our function and identify the matrix size: TypeScript function columnTraverse(matrix: number[][]): void {const rows: number = matrix.length; const cols: number = matrix[0].length;}

Step 2: Setting Up Initial Conditions

Now that we're aware of the matrix dimensions, we should establish the starting point (bottom-right) and the direction of travel (upward initially). Additionally, we'll need an array to keep track of the cells we've visited in order: TypeScript function columnTraverse(matrix: number[][]): void {const rows: number = matrix.length; const cols: number = matrix[0].length; let direction: string = "up"; let row: number = rows - 1; let col: number = cols - 1; const output: number[] = []; let index: number = 0;}

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Step 3: Traversing the Matrix

It's time to go exploring! We'll now implement a while loop to traverse the matrix. This loop will continue until we have covered all the cells in the matrix. As we "visit" each cell, we'll add the value in the cell to our array.

TypeScript

function columnTraverse(matrix: number[][]): number[] {
    const rows: number = matrix.length;
    const cols: number = matrix[0].length;
    let direction: string = "up";
    let row: number = rows - 1;
    let col: number = cols - 1;
    const output: number[] = [];

    for (let index: number = 0; index < rows * cols; index++) {
        output[index] = matrix[row][col];

        if (direction === "up") {
            if (row - 1 < 0) {
                direction = "down";
                col -= 1;
            } else {
                row -= 1;
            }
        } else {
            if (row + 1 === rows) {
                direction = "up";
                col -= 1;
            } else {
                row += 1;
            }
        }
    }

    return output;
}

const matrix: number[][] = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
];

const result: number[] = columnTraverse(matrix);
console.log(result.join(" "));

// Outputs: 12 8 4 3 7 11 10 6 2 1 5 9

function columnTraverse(matrix: number[][]): number[] {
    const rows: number = matrix.length;
    const cols: number = matrix[0].length;
    let direction: string = "up";
    let row: number = rows - 1;
    let col: number = cols - 1;
    const output: number[] = [];

    for (let index: number = 0; index < rows * cols; index++) {
        output[index] = matrix[row][col];

        if (direction === "up") {
            if (row - 1 < 0) {
                direction = "down";
                col -= 1;
            } else {
                row -= 1;
            }
        } else {
            if (row + 1 === rows) {
                direction = "up";
                col -= 1;
            } else {
                row += 1;
            }
        }
    }

    return output;
}

const matrix: number[][] = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
];

const result: number[] = columnTraverse(matrix);
console.log(result.join(" "));

// Outputs: 12 8 4 3 7 11 10 6 2 1 5 9

That's it, we've completed the function! This TypeScript function will return the output array, which gives us the order of traversal through the matrix.

Step 4: Traverse Using Decreasing Range

Let's explore one more way of traversal. We can leverage the utility of TypeScript's for loop to traverse a 2D matrix in reverse order. This flexibility can also create a sequence that decrements.

To achieve this, we use a for loop with decrementing indices.

Consider our familiar 3x4 matrix:

TypeScript

const matrix: number[][] = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
];

const matrix: number[][] = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
];

Using decrementing loops, the reverse traverse pattern would produce this list: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1].

Here's how we can implement this reverse traversal:

TypeScript

function reverseTraverse(matrix: number[][]): number[] {
    const rows: number = matrix.length;
    const cols: number = matrix[0].length;
    const output: number[] = [];
    let index: number = 0;

    for (let row: number = rows - 1; row >= 0; --row) {
        for (let col: number = cols - 1; col >= 0; --col) {
            output[index++] = matrix[row][col];
        }
    }

    return output;
}

const matrix: number[][] = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
];

const result: number[] = reverseTraverse(matrix);
console.log(result.join(" "));

// Outputs: 12 11 10 9 8 7 6 5 4 3 2 1

function reverseTraverse(matrix: number[][]): number[] {
    const rows: number = matrix.length;
    const cols: number = matrix[0].length;
    const output: number[] = [];
    let index: number = 0;

    for (let row: number = rows - 1; row >= 0; --row) {
        for (let col: number = cols - 1; col >= 0; --col) {
            output[index++] = matrix[row][col];
        }
    }

    return output;
}

const matrix: number[][] = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
];

const result: number[] = reverseTraverse(matrix);
console.log(result.join(" "));

// Outputs: 12 11 10 9 8 7 6 5 4 3 2 1

In this function, we start the loop for row from rows - 1 and run it to 0, decrementing it at each step. Similarly, our nested loop for col starts from cols - 1 and goes to 0. This allows us to start from the bottom-right corner and traverse leftward, then upward, covering the entire matrix in reverse order.

Matrix Traversal in TypeScript

Introduction

Task Statement

Step 1: Initialize and Understand Matrix Dimensions

Step 2: Setting Up Initial Conditions

Join the 1M+ learners on CodeSignal

Step 3: Traversing the Matrix

Step 4: Traverse Using Decreasing Range

Lesson Summary