Transposing Two-Dimensional Arrays in JavaScript

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will explore the concept of transposing a two-dimensional array in JavaScript. We will learn how to use the Array.prototype.map() method to create a transpose of the given array. By the end of this lab, you will have a good understanding of how to manipulate two-dimensional arrays in JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") subgraph Lab Skills javascript/variables -.-> lab-28668{{"`Transposing Two-Dimensional Arrays in JavaScript`"}} javascript/data_types -.-> lab-28668{{"`Transposing Two-Dimensional Arrays in JavaScript`"}} javascript/arith_ops -.-> lab-28668{{"`Transposing Two-Dimensional Arrays in JavaScript`"}} javascript/comp_ops -.-> lab-28668{{"`Transposing Two-Dimensional Arrays in JavaScript`"}} javascript/array_methods -.-> lab-28668{{"`Transposing Two-Dimensional Arrays in JavaScript`"}} javascript/higher_funcs -.-> lab-28668{{"`Transposing Two-Dimensional Arrays in JavaScript`"}} end

Transpose a Matrix in JavaScript

To transpose a two-dimensional array in JavaScript, follow these steps:

  1. Open the Terminal/SSH and type node to start practicing coding.
  2. Use Array.prototype.map() to create the transpose of the given two-dimensional array. The map() method creates a new array with the results of calling a provided function on every element in the array.
  3. The provided function should take two arguments: the current element of the array and its index. In this case, we only need the index to create the transpose.
  4. Use the index to access the corresponding elements in each row of the two-dimensional array and create a new array with those elements. This will be the new row in the transposed array.
  5. Repeat the previous step for each column in the two-dimensional array to create the complete transposed array.

Here's the code to transpose a two-dimensional array in JavaScript:

const transpose = (arr) => arr[0].map((col, i) => arr.map((row) => row[i]));

transpose([
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [10, 11, 12]
]);
// [[1, 4, 7, 10], [2, 5, 8, 11], [3, 6, 9, 12]]

Summary

Congratulations! You have completed the Transpose Matrix lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like