Transpose a two dimensional (2D) array in JavaScript

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:  
 
 
anikakapoor
javascript-array
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.