More Ways to Traverse Multidimensional Arrays in JavaScript

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: JavaScript const matrix = [[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 towards 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: JavaScript function columnTraverse(matrix) {const rows = matrix.length; const cols = 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: JavaScript function columnTraverse(matrix) {const rows = matrix.length; const cols = matrix[0].length; let direction = "up"; let row = rows - 1; let col = cols - 1; const output = []; let index = 0;}

Step 3: Traversing the Matrix

Join the 1M+ learners on CodeSignal

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

Step 4: Traverse Using Decreasing Range

Let's explore one more way of traversal. We can leverage the utility of JavaScript'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:

JavaScript

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

const matrix = [
    [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:

JavaScript

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

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

    return output;
}

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

const result = reverseTraverse(matrix);
console.log(result.join(" "));

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

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

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

    return output;
}

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

const result = 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.

As you gain proficiency in matrix traversal in JavaScript, you'll discover the many creative ways to utilize JavaScript's flexible syntax. The more you experiment with different traversal methods, the better you become! Happy practicing!

More Ways to Traverse Multidimensional Arrays in JavaScript

Introduction

Task Statement

Step 1: Initialize and Understand Matrix Dimensions

Step 2: Setting Up Initial Conditions

Step 3: Traversing the Matrix

Join the 1M+ learners on CodeSignal

Step 4: Traverse Using Decreasing Range

Lesson Summary