JavaScript Program to Print Matrix in Diagonal Pattern

We have given the n*n size matrix and we need to print the elements of this matrix in the diagonal pattern using JavaScript language. Below are the examples for a better understanding of the problem statement.

Examples:

Input: mat[3][3] = {{1, 2, 3},
                                {4, 5, 6},
                                {7, 8, 9}}
Output:
1 2 4 7 5 3 6 8 9
Explanation:
Start from 1 
Then from upward to downward diagonally i.e. 2 and 4
Then from downward to upward diagonally i.e 7, 5, 3 
Then from up to down diagonally i.e  6, 8 
Then down to up i.e. end at 9.

Input: mat[4][4] =  {{1,  2,  3,  10}, 
                                  {4,  5,  6,  11},               
                                  {7,  8,  9,  12},                      
                                  {13, 14, 15, 16}}
Output: 1 2 4 7 5 3 10 6 8 13 14 9 11 12 15 16
Explanation :  Start from 1  Then from upward to downward diagonally i.e. 2 and 4 
Then from downward to upward diagonally i.e 7, 5, 3
Then from upward to downward diagonally i.e. 10 6 8 13
Then from downward to upward diagonally i.e 14 9 11 
Then from upward to downward diagonally i.e. 12 15 then end at 16 .

These are the following approaches to solve this problem:

Approach 1: Using Nested For Loops

• In this approach, we use the nested for loops where we are iterating over the diagonals of the matrix by alternating between upside and downside directions.
• We use the nested loops to go through the diagonals by adjusting the positions to ensure that the correct traversal is done in both row and column and then we print the elements in the diagonal pattern.

Example: In this example, we print Matrix in Diagonal Pattern in JavaScript using Nested For Loops.

Javascript

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

// Getting the number of rows
// and columns in the matrix
let rowLen = mat.length;
let colLen = mat[0].length;

// Looping through diagonals
for (let i = 0; i < rowLen + colLen - 1; i++) {

    // Checking if current
    // diagonal is even or odd
    if (i % 2 === 0) {

        // Looping through elements in
        // the current diagonal (even)
        for (let j = Math.min(i, rowLen - 1); j >= 0
            && i - j < colLen; j--) {

            // Print the element in
            // the current diagonal
            console.log(mat[j][i - j]);
        }
    } else {

        // Looping through elements in
        // the current diagonal (odd)
        for (let j = Math.min(i, colLen - 1); j >= 0
            && i - j < rowLen; j--) {

            // Printing the element
            // in the current diagonal
            console.log(mat[i - j][j]);
        }
    }
}

Output

1
2
4
7
5
3
10
6
8
13
14
9
11
12
15
16

Approach 2: Using ZigZag Iteration

• In this approach, we are using the zigzag iteration to go through the matrix diagonally, we are using the if-else blocks to control the direction of traversal and then coming to upside and downside along with diagonals.
• The up variable here is used between the upside and downside movements which also makes sure the complete zigzag traversal.

Example: In this example, we print Matrix in a Diagonal Pattern in JavaScript using ZigZag Iteration.

Javascript

// Input matrix
let mat = [[1, 2, 3],
[4, 5, 6],
[7, 8, 9]];

// Initialize variables for row,
// column, matrix dimensions, and direction
let r = 0, c = 0,
    rowLen = mat.length,
    numLen = mat[0].length,
    up = true;

// Loop through each element in the matrix
for (let i = 0; i < rowLen * numLen; i++) {

    // Print the current element
    console.log(mat[r]);

    // Check the direction (up or down)
    // bfor the next element
    if (up) {

        // Move diagonally up if possible,
        // otherwise change direction
        if (r > 0 && c < numLen - 1) {
            r--;
            c++;
        } else {
            up = false;

            // If still within the column boundaries,
            // move right; otherwise, move down
            if (c < numLen - 1) {
                c++;
            } else {
                r++;
            }
        }
    } else {

        // Move diagonally down if possible,
        // otherwise change direction
        if (c > 0 && r < rowLen - 1) {
            c--;
            r++;
        } else {
            up = true;

            // If still within the row boundaries,
            // move down; otherwise, move right
            if (r < rowLen - 1) {
                r++;
            } else {
                c++;
            }
        }
    }
}

Output

1
2
4
7
5
3
6
8
9

Reference: https://www.geeksforgeeks.org/print-matrix-diagonal-pattern/