Multidimensional Arrays and Their Traversal in JavaScript

Multidimensional Arrays and Their Traversal in JavaScript | CodeSignal Learn

Topic Overview

Welcome to today's session on "Multidimensional Arrays and Their Traversal in JavaScript" . Multidimensional arrays are types of arrays that store arrays at each index instead of single elements. They allow us to create complex data structures that can model various real-life scenarios. Our goal today is to strengthen your foundational knowledge of multidimensional arrays and how to handle them effectively in JavaScript.

Creating Multidimensional Arrays

To construct a multidimensional array in JavaScript, we use arrays of arrays. Here is an example to demonstrate how to create and work with 2D static arrays: JavaScript let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; console.log(array); // Outputs: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ] let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; console.log(array); // Outputs: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]

Indexing in Multidimensional Arrays

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Traversing Multidimensional Arrays

Another way to look at multidimensional arrays is with an analogy. You can think of the rows as floors and the columns as apartments on each floor. By using nested loops, we can easily visit every floor (outer array) and every apartment on each floor (inner array) to perform various operations. JavaScript let array = [["Apt 101", "Apt 102", "Apt 103"], ["Apt 201", "Exit Floor", "Apt 203"], ["Apt 301", "Apt 302", "Apt 303"]]; // Loop through 2D array for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + ", ");} console.log();} // Outputs: // Apt 101, // Apt 102, // Apt 103, // // Apt 201, // Exit Floor, // Apt 203, // // Apt 301, // Apt 302, // Apt 303, let array = [["Apt 101", "Apt 102", "Apt 103"], ["Apt 201", "Exit Floor", "Apt 203"], ["Apt 301", "Apt 302", "Apt 303"]]; // Loop through 2D array for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + ", ");} console.log();} // Outputs: // Apt 101, // Apt 102, // Apt 103, // // Apt 201, // Exit Floor, // Apt 203, // // Apt 301, // Apt 302, // Apt 303, The outer loop (for (let i = 0; i < array.length; i++)) iterates through the rows of the multidimensional array, where array.length returns the number of rows. The inner loop (for (let j = 0; j < array[i].length; j++)) iterates through the columns within each row, where array[i].length returns the number of elements in the current row.

Updating Multidimensional Arrays

To continue with the apartment-building analogy, suppose the task is to replace an apartment number. For instance, let's update the second apartment number on the first floor (the second element in the first array) to a new number. Here's how we can achieve this: JavaScript let array = [["Apt 101", "Apt 102", "Apt 103"], ["Apt 201", "Apt 202", "Apt 203"], ["Apt 301", "Apt 302", "Apt 303"]]; // Updating an element array[0][1] = "Apt 104"; // Changing "Apt 102" to "Apt 104" for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + " ");} console.log();} // Outputs: // Apt 101 Apt 104 Apt 103 // Apt 201 Apt 202 Apt 203 // Apt 301 Apt 302 Apt 303 let array = [["Apt 101", "Apt 102", "Apt 103"], ["Apt 201", "Apt 202", "Apt 203"], ["Apt 301", "Apt 302", "Apt 303"]]; // Updating an element array[0][1] = "Apt 104"; // Changing "Apt 102" to "Apt 104" for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + " ");} console.log();} // Outputs: // Apt 101 Apt 104 Apt 103 // Apt 201 Apt 202 Apt 203 // Apt 301 Apt 302 Apt 303

Finding the Number of Rows and Columns

JavaScript offers various ways to manage multidimensional arrays. For instance, you can determine the number of rows (floors) and columns (units on each floor): JavaScript let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // Finding the number of rows let numFloors = array.length; console.log(numFloors); // Outputs: 3 // Finding the number of columns let numUnits = array[0].length; console.log(numUnits); // Outputs: 3 let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // Finding the number of rows let numFloors = array.length; console.log(numFloors); // Outputs: 3 // Finding the number of columns let numUnits = array[0].length; console.log(numUnits); // Outputs: 3

Adding a New Row or Column

To add a new row to a 2D static array, you typically add the new row at the end of the array, as dynamically inserting rows at specific positions can be complex and is not generally recommended for static arrays. If you want to insert a new row at a specific position, keep in mind that it will involve shifting subsequent rows. JavaScript let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; array[3] = [10, 11, 12]; // Adding a new row at the 4th position for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + " ");} console.log();} // Outputs: // 1 2 3 // 4 5 6 // 7 8 9 // 10 11 12 let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; array[3] = [10, 11, 12]; // Adding a new row at the 4th position for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + " ");} console.log();} // Outputs: // 1 2 3 // 4 5 6 // 7 8 9 // 10 11 12

Removing a Row or Column

To remove a column from a 2D array, you can directly modify each row using the splice method. JavaScript let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // Removing the second column (index 1) from each row for (let i = 0; i < array.length; i++) {array[i].splice(1, 1); // Remove 1 element at index 1 of each row} for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + " ");} console.log();} // Outputs: // 1 3 // 4 6 // 7 9 let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // Removing the second column (index 1) from each row for (let i = 0; i < array.length; i++) {array[i].splice(1, 1); // Remove 1 element at index 1 of each row} for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + " ");} console.log();} // Outputs: // 1 3 // 4 6 // 7 9 To remove a row, you can use the splice method directly on the main array. JavaScript let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // Removing the second row (index 1) array.splice(1, 1); // Remove 1 element at index 1 of the array for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + " ");} console.log();} // Outputs: // 1 2 3 // 7 8 9 let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // Removing the second row (index 1) array.splice(1, 1); // Remove 1 element at index 1 of the array for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {console.log(array[i][j] + " ");} console.log();} // Outputs: // 1 2 3 // 7 8 9 In both examples, splice(1, 1) means at index 1, remove 1 element. This removes the second column from each row in the first case, and removes the second row in the second case.

Topic Overview

Creating Multidimensional Arrays

Indexing in Multidimensional Arrays

Join the 1M+ learners on CodeSignal

Traversing Multidimensional Arrays

Updating Multidimensional Arrays

Finding the Number of Rows and Columns

Adding a New Row or Column

Removing a Row or Column

Break/Continue in Nested Loops

Lesson Summary