GeeksforGeeks App
Open App
Browser
Continue

# Transpose a two dimensional (2D) array in JavaScript

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 a 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 the original array) from the results.

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

## HTML

 `<``body` `style``=``"text-align:center;"``>``    ``<``h1` `style``=``"color:green;"``>``        ``GeeksForGeeks``    ````    ``<``h3``>``        ``Transpose a two dimensional (2D) array``    ```` ` `    ``<``p` `id``=``"GFG_UP"` `style="font-size: 16px; ``                          ``font-family: sans-serif; ``                          ``font-weight: bold;">``    ```` ` `    ``<``button` `onclick``=``"gfg_Run()"``>``        ``Click here``    ```` ` `    ``<``p` `id``=``"GFG_DOWN"` `style="color:green; ``                            ``font-size: 30px; ``                            ``font-weight: bold;">``    ```` ` `    ``<``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] + " ] ]";``        ``}         ``    `````

Output:

Approach 2:

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

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

## HTML

 `<``body` `style``=``"text-align:center;"``>`` ` `    ``<``h1` `style``=``"color:green;"``>``        ``GeeksForGeeks``    ````    ``<``h2``>Transpose a 2D array`` ` `    ``<``p` `id``=``"GFG_UP"` `style="font-size: 16px; ``                          ``font-family: sans-serif; ``                          ``font-weight: bold;">``    ```` ` `    ``<``button` `onclick``=``"gfg_Run()"``>``        ``Click here``    ```` ` `    ``<``p` `id``=``"GFG_DOWN"` `style="color:green; ``                            ``font-size: 30px; ``                            ``font-weight: bold;">``    ```` ` `    ``<``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] + " ] ]";``        ``}         ``    `````

Output:

My Personal Notes arrow_drop_up
Related Tutorials