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.

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:

All indices in JavaScript arrays are 0-based. In a 1-dimensional array, the [n] notation is used to access the (n+1)th element. For example, in the array ['a', 'b', 'c'], to access the element 'b', you would use array[1] since indices are zero-based.

For multidimensional arrays, each element is itself an array. Therefore, you can access an entire row (inner array) or a specific element within that row. Let's say you want to access the first row and the second element within that row:

Here, row1 = array[0] gets the first row, and item = row1[1] gives us the element 'b', which is the second element in the first row. Note that this is equivalent to directly accessing (array[0])[1], or array[0][1] for short:

In this case, array[0] refers to the first inner array, and [1] refers to the second element of that array.

It's also important to note that if you try to access an index that is out of bounds, it does not throw an error but returns undefined:

In this example:

• array[3] tries to access the fourth row, which does not exist, so it returns undefined.
• array[0][5] tries to access the sixth element in the first row, which also does not exist, so it returns undefined.

However, console.log(array[3][5]) attempts to access a property of undefined, which throws a TypeError.

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.

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.

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 offers various ways to manage multidimensional arrays. For instance, you can determine the number of rows (floors) and columns (units on each floor):

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.

To remove a column from a 2D array, you can directly modify each row using the splice method.

To remove a row, you can use the splice method directly on the main array.

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.

Sometimes, when we visit every apartment on each floor, we might need to start visiting the next floor midway. break helps us exit the current loop, while continue helps us skip the current iteration and move to the next one.

Here, as soon as Exit Floor is found on a floor, the entire loop breaks, and no further units on this floor are visited. However, the remaining floors are processed as before, as break breaks only the nested inner loop.

We can also make use of continue in a similar scenario:

That was exciting! We went through various operations on multidimensional arrays, starting from their creation, methods to update, and useful JavaScript methods. We also learned how we can visit every row and every element in each row.

Practice solidifies learning! Your new adventure awaits in our upcoming practical exercises, where you can apply these concepts to multidimensional arrays! Buckle up and have fun!