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:
TypeScript1let array: number[][] = [ 2 [1, 2, 3], 3 [4, 5, 6], 4 [7, 8, 9] 5]; 6 7console.log(array); 8// Outputs: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
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:
TypeScript1let array: string[][] = [ 2 ['a', 'b', 'c'], 3 ['d', 'e', 'f'], 4 ['g', 'h', 'i'] 5]; 6 7let row1: string[] = array[0]; // Accessing the first row 8let item: string = row1[1]; // Accessing the second element in the first row 9 10console.log(item); // Outputs: 'b'
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]:
TypeScript1let array: string[][] = [ 2 ['a', 'b', 'c'], 3 ['d', 'e', 'f'], 4 ['g', 'h', 'i'] 5]; 6 7// Accessing an element directly 8console.log(array[0][1]); // Outputs: 'b'
If you try to access an index out of bounds, it returns undefined:
TypeScript1let array: string[][] = [ 2 ['a', 'b', 'c'], 3 ['d', 'e', 'f'], 4 ['g', 'h', 'i'] 5]; 6 7console.log(array[3]); // Outputs: undefined 8console.log(array[0][5]); // Outputs: undefined 9console.log(array[3]?.[5]); // Safely returns undefined without TypeError
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.
TypeScript1let array: string[][] = [ 2 ["Apt 101", "Apt 102", "Apt 103"], 3 ["Apt 201", "Exit Floor", "Apt 203"], 4 ["Apt 301", "Apt 302", "Apt 303"] 5]; 6 7// Loop through 2D array 8for (let i = 0; i < array.length; i++) { 9 for (let j = 0; j < array[i].length; j++) { 10 console.log(array[i][j] + ", "); 11 } 12 console.log(); 13} 14 15// Outputs: 16// Apt 101, 17// Apt 102, 18// Apt 103, 19// 20// Apt 201, 21// Exit Floor, 22// Apt 203, 23// 24// Apt 301, 25// Apt 302, 26// Apt 303,
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:
TypeScript1let array: string[][] = [ 2 ["Apt 101", "Apt 102", "Apt 103"], 3 ["Apt 201", "Apt 202", "Apt 203"], 4 ["Apt 301", "Apt 302", "Apt 303"] 5]; 6 7// Updating an element 8array[0][1] = "Apt 104"; // Changing "Apt 102" to "Apt 104" 9 10for (let i = 0; i < array.length; i++) { 11 for (let j = 0; j < array[i].length; j++) { 12 console.log(array[i][j] + " "); 13 } 14 console.log(); 15} 16 17// Outputs: 18// Apt 101 Apt 104 Apt 103 19// Apt 201 Apt 202 Apt 203 20// Apt 301 Apt 302 Apt 303
TypeScript allows for managing multidimensional arrays with type safety. You can determine the number of rows (floors) and columns (units on each floor):
TypeScript1let array: number[][] = [ 2 [1, 2, 3], 3 [4, 5, 6], 4 [7, 8, 9] 5]; 6 7// Finding the number of rows 8let numFloors: number = array.length; 9console.log(numFloors); // Outputs: 3 10 11// Finding the number of columns 12let numUnits: number = array[0].length; 13console.log(numUnits); // Outputs: 3
To add a new row to a 2D array, typically add it at the end. Inserting at specific positions can involve additional operations:
TypeScript1let array: number[][] = [ 2 [1, 2, 3], 3 [4, 5, 6], 4 [7, 8, 9] 5]; 6 7array[3] = [10, 11, 12]; // Adding a new row at the 4th position 8 9for (let i = 0; i < array.length; i++) { 10 for (let j = 0; j < array[i].length; j++) { 11 console.log(array[i][j] + " "); 12 } 13 console.log(); 14} 15 16// Outputs: 17// 1 2 3 18// 4 5 6 19// 7 8 9 20// 10 11 12
To remove a column from a 2D array, directly modify each row using the splice method.
TypeScript1let array: number[][] = [ 2 [1, 2, 3], 3 [4, 5, 6], 4 [7, 8, 9] 5]; 6 7// Removing the second column (index 1) from each row 8for (let i = 0; i < array.length; i++) { 9 array[i].splice(1, 1); // Remove 1 element at index 1 of each row 10} 11 12for (let i = 0; i < array.length; i++) { 13 for (let j = 0; j < array[i].length; j++) { 14 console.log(array[i][j] + " "); 15 } 16 console.log(); 17} 18 19// Outputs: 20// 1 3 21// 4 6 22// 7 9
To remove a row:
TypeScript1let array: number[][] = [ 2 [1, 2, 3], 3 [4, 5, 6], 4 [7, 8, 9] 5]; 6 7// Removing the second row (index 1) 8array.splice(1, 1); // Remove 1 element at index 1 of the array 9 10for (let i = 0; i < array.length; i++) { 11 for (let j = 0; j < array[i].length; j++) { 12 console.log(array[i][j] + " "); 13 } 14 console.log(); 15} 16 17// Outputs: 18// 1 2 3 19// 7 8 9
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.
TypeScript1let array: string[][] = [ 2 ["Apt 101", "Apt 102", "Apt 103"], 3 ["Apt 201", "Exit Floor", "Apt 203"], 4 ["Apt 301", "Apt 302", "Apt 303"] 5]; 6 7// Break in nested loop 8for (let i = 0; i < array.length; i++) { 9 for (let j = 0; j < array[i].length; j++) { 10 if (array[i][j] === "Exit Floor") { 11 break; 12 } 13 console.log(array[i][j] + ", "); 14 } 15 console.log(); 16} 17 18// Outputs: 19// Apt 101, 20// Apt 102, 21// Apt 103, 22// 23// Apt 201, 24// 25// Apt 301, 26// Apt 302, 27// Apt 303,
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:
TypeScript1let array: string[][] = [ 2 ["Apt 101", "Apt 102", "Apt 103"], 3 ["Apt 201", "Exit Floor", "Apt 203"], 4 ["Apt 301", "Apt 302", "Apt 303"] 5]; 6 7// Continue in nested loop 8for (let i = 0; i < array.length; i++) { 9 for (let j = 0; j < array[i].length; j++) { 10 if (array[i][j] === "Exit Floor") { 11 continue; 12 } 13 console.log(array[i][j] + ", "); 14 } 15 console.log(); 16} 17 18// Outputs: 19// Apt 101, 20// Apt 102, 21// Apt 103, 22// 23// Apt 201, 24// Apt 203, 25// 26// Apt 301, 27// Apt 302, 28// Apt 303,
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!