Welcome to today's session on "Multidimensional Arrays and Their Traversal in TypeScript". Multidimensional arrays in TypeScript are similar to those in other programming languages but with the added benefit of type safety. These arrays store arrays at each index instead of single elements, enabling 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 TypeScript.

To construct a multidimensional array in TypeScript, we utilize arrays of arrays, incorporating type annotations to specify data types clearly. Here is an example demonstrating how to create and work with 2D static arrays:

All indices in TypeScript 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. 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]:

If you try to access an index out of bounds, it returns undefined:

In the above example, we use the optional chaining (?.) operator to safely attempt to access nested properties without causing a runtime error. Normally, trying to access an out-of-bounds index like array[3][5] would throw a TypeError because array[3] is undefined, and you're attempting to access a property [5] on undefined. By using array[3]?.[5], the optional chaining operator ?. ensures that if array[3] is undefined, the expression will short-circuit and return undefined immediately, avoiding any error. This is particularly useful when dealing with multidimensional arrays where the index might not always exist.

You can think of the rows as floors and the columns as apartments on each floor. By using nested loops, we can visit every floor (outer array) and every apartment on each floor (inner array) to perform various operations.

To continue with the apartment-building analogy, suppose the task is to replace an apartment number. For example, updating the second apartment number on the first floor (the second element in the first array) can be achieved like this:

TypeScript allows for managing multidimensional arrays with type safety. You can determine the number of rows (floors) and columns (units on each floor):

To add a new row to a 2D array, typically add it at the end. Inserting at specific positions can involve additional operations:

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

To remove a row:

Sometimes, when visiting every apartment on each floor, you might need to start visiting the next floor midway. break exits the current loop, while continue skips the current iteration.

Here, as soon as Exit Floor is found, the inner loop breaks, stopping further iterations on that floor. However, the remaining floors are processed as before.

With continue:

That was engaging! We explored various operations on multidimensional arrays with TypeScript, starting from their creation and updating methods, and TypeScript-specific attributes. We also learned how to traverse every row and each element in each row safely. Make sure to practice these concepts with hands-on exercises to solidify your understanding. Happy coding!