Square matrix rotation in JavaScript

We are required to write a JavaScript function that takes in an array of arrays of n * n order (square matrix). The function should rotate the array by 90 degrees (clockwise). The condition is that we have to do this in place (without allocating any extra array).

For example −

If the input array is −

const arr = [
   [1, 2, 3],
   [4, 5, 6],
   [7, 8, 9]
];

Then the rotated array should look like −

const output = [
   [7, 4, 1],
   [8, 5, 2],
   [9, 6, 3],
];

How It Works

The rotation algorithm works in two steps:

1. Transpose the matrix: Convert rows to columns by swapping elements across the diagonal
2. Reverse each row: Flip elements horizontally in each row

Example

Following is the code −

const arr = [
   [1, 2, 3],
   [4, 5, 6],
   [7, 8, 9]
];

const rotateArray = (arr = []) => {
   // Step 1: Transpose the matrix (swap rows and columns)
   for (let rowIndex = 0; rowIndex < arr.length; rowIndex += 1) {
      for (let columnIndex = rowIndex + 1; columnIndex < arr.length; columnIndex += 1) {
         [
            arr[columnIndex][rowIndex],
            arr[rowIndex][columnIndex],
         ] = [
            arr[rowIndex][columnIndex],
            arr[columnIndex][rowIndex],
         ];
      }
   }
   
   // Step 2: Reverse each row
   for (let rowIndex = 0; rowIndex < arr.length; rowIndex += 1) {
      for (let columnIndex = 0; columnIndex < arr.length / 2; columnIndex += 1) {
         [
            arr[rowIndex][arr.length - columnIndex - 1],
            arr[rowIndex][columnIndex],
         ] = [
            arr[rowIndex][columnIndex],
            arr[rowIndex][arr.length - columnIndex - 1],
         ];
      }
   }
};

rotateArray(arr);
console.log(arr);

Output

[ [ 7, 4, 1 ], [ 8, 5, 2 ], [ 9, 6, 3 ] ]

Step-by-Step Breakdown

Let's trace through the rotation process:

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

console.log("Original matrix:");
console.log(matrix);

// Step 1: Transpose
for (let i = 0; i < matrix.length; i++) {
   for (let j = i + 1; j < matrix.length; j++) {
      [matrix[i][j], matrix[j][i]] = [matrix[j][i], matrix[i][j]];
   }
}

console.log("After transpose:");
console.log(matrix);

// Step 2: Reverse each row
for (let i = 0; i < matrix.length; i++) {
   matrix[i].reverse();
}

console.log("After reversing rows (90° clockwise rotation):");
console.log(matrix);

Output

Original matrix:
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
After transpose:
[ [ 1, 4, 7 ], [ 2, 5, 8 ], [ 3, 6, 9 ] ]
After reversing rows (90° clockwise rotation):
[ [ 7, 4, 1 ], [ 8, 5, 2 ], [ 9, 6, 3 ] ]

Key Points

• In-place rotation: No extra space needed, modifying the original matrix
• Time complexity: O(n²) where n is the matrix dimension
• Space complexity: O(1) constant extra space
• Two-step approach: Transpose first, then reverse rows for clockwise rotation

Conclusion

Matrix rotation in JavaScript can be efficiently achieved using a two-step process: transpose the matrix and then reverse each row. This approach rotates the matrix 90 degrees clockwise while maintaining the in-place constraint.