Skip to content
Related Articles

Related Articles

Improve Article
Transpose a two dimensional (2D) array in JavaScript
  • Last Updated : 12 May, 2021

Given a 2D array (matrix) and the task is to get the transpose of the matrix using JavaScript.

Approach 1: 

  • Store a 2D array into variable.
  • Display the 2D array (matrix) content.
  • Call map() method which provides a callback function single time for every element in an array, maintaining the order, and returns a new array (transpose of original array) from the results.

Example: This example uses array.map() method to get the transpose of the array.  

HTML




<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Transpose of a 2D array
        </title>
    </head>
 
    <body style = "text-align:center;">
     
        <h1 style = "color:green;" >
            GeeksForGeeks
        </h1>
     
        <p id = "GFG_UP" style =
            "font-size: 16px; font-family: sans-serif; font-weight: bold;">    
        </p>
 
         
        <button onclick = "gfg_Run()">
            Click here
        </button>
         
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 30px; font-weight: bold;">
        </p>
 
         
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
             
            var array = [
                            [1, 1, 1],
                            [2, 2, 2],
                            [3, 3, 3],
                        ];
             
            el_up.innerHTML = "[ [ " + array[0] + " ] ], [ [ "
                             + array[1] + " ] ], [ [ " + array[2] + " ] ]";
             
            function transpose(mat) {
                for (var i = 0; i < mat.length; i++) {
                    for (var j = 0; j < i; j++) {
                        const tmp = mat[i][j];
                        mat[i][j] = mat[j][i];
                        mat[j][i] = tmp;
                    }
                }
            }
             
            function gfg_Run() {
                array = array[0].map((col, i) => array.map(row => row[i]));
                 
                el_down.innerHTML = "[ [ " + array[0] + " ] ], [ [ "
                        + array[1] + " ] ], [ [ " + array[2] + " ] ]";
            }        
        </script>
    </body>
</html>                   

Output: 

  • Before clicking on the button: 
     



  • After clicking on the button: 
     

Approach 2:  

  • Store a 2D array into variable.
  • Replace every element in the array by its mirror image with respect to diagonal of the array.

Example: This example creates a function which replaces every element by its mirror image to get the transpose of the array.  

HTML




<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Transposing a 2D array
        </title>
    </head>
     
    <body style = "text-align:center;">
         
        <h1 style = "color:green;" >
            GeeksForGeeks
        </h1>
         
        <p id = "GFG_UP" style =
            "font-size: 16px; font-family: sans-serif; font-weight: bold;">    
        </p>
 
         
        <button onclick = "gfg_Run()">
            Click here
        </button>
         
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 30px; font-weight: bold;">
        </p>
 
         
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
             
            var array = [
                            [1, 1, 1],
                            [2, 2, 2],
                            [3, 3, 3],
                        ];
             
            el_up.innerHTML = "[ [ " + array[0] + " ] ], [ [ "
                    + array[1] + " ] ], [ [ " + array[2] + " ] ]";
             
            function transpose(mat) {
                for (var i = 0; i < mat.length; i++) {
                    for (var j = 0; j < i; j++) {
                        const tmp = mat[i][j];
                        mat[i][j] = mat[j][i];
                        mat[j][i] = tmp;
                    }
                }
            }
             
            function gfg_Run() {
                transpose(array);
                el_down.innerHTML = "[ [ " + array[0] + " ] ], [ [ "
                        + array[1] + " ] ], [ [ " + array[2] + " ] ]";
            }        
        </script>
    </body>
</html>                   

Output: 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     

 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :