Lesson 2

Exploring Multi-Dimensional Arrays in TypeScript

Introduction and Overview

Are you ready for a TypeScript journey? In this lesson, we'll delve into Simple Data Structures and Advanced Array Operations. You'll master the creation, manipulation, and access of elements in both single and multi-dimensional arrays. Imagine managing a task list for a software development project where each array element could be a feature with its own array of sub-features – exciting, isn't it? Let's dive in!

Creation of Multi-Dimensional Arrays

Multi-dimensional arrays behave like clusters with each item being an array itself, akin to clusters of data units.

Creating a multi-dimensional array is straightforward: simply place an array inside another array, as shown here:

TypeScript
1let multiArray: any[][] = [[1, 2, 3], ['a', 'b', 'c'], [true, false]]; 2console.log(multiArray); // Output: [ [ 1, 2, 3 ], [ 'a', 'b', 'c' ], [ true, false ] ]

In this case, we have a multi-dimensional array of three elements, each of which is also an array.

Array Indexing

Accessing elements in a multi-dimensional array relies on indexes. The first index points to the outer array, while the second one points to the inner array:

TypeScript
1let multiArray: any[][] = [[1, 2, 3], ['a', 'b', 'c'], [true, false]]; 2 3// Accessing the first array 4console.log(multiArray[0]); // Output: [ 1, 2, 3 ] 5console.log(multiArray[0][0]); // Output: 1 6console.log(multiArray[0][1]); // Output: 2

Working with multi-dimensional arrays and indexing will enhance your understanding of handling complex data!

Modifying Array Elements

Just as we modify elements in a one-dimensional array, you can modify elements in a multi-dimensional array using their indices. The first index points to the outer array (or the sub-array), while the second index points to the item inside (or the element in the sub-array):

TypeScript
1let multiArray: any[][] = [[1, 2, 3], ['a', 'b', 'c'], [true, false]]; 2 3// Modifying an element in the first array 4multiArray[0][0] = 100; 5console.log(multiArray); // Output: [ [ 100, 2, 3 ], [ 'a', 'b', 'c' ], [ true, false ] ] 6 7// Modifying an element in the second array 8multiArray[1][2] = 'z'; 9console.log(multiArray); // Output: [ [ 100, 2, 3 ], [ 'a', 'b', 'z' ], [ true, false ] ]

It is also possible to add or remove elements to and from multi-dimensional arrays, thereby changing their structure:

TypeScript
1multiArray[0].push(4); 2console.log(multiArray); // Output: [ [ 100, 2, 3, 4 ], [ 'a', 'b', 'z' ], [ true, false ] ] 3 4multiArray[1].pop(); 5console.log(multiArray); // Output: [ [ 100, 2, 3, 4 ], [ 'a', 'b' ], [ true, false ] ]
Array Operations in TypeScript

TypeScript arrays come with a variety of powerful methods for array manipulation. Here is a list of the most commonly used ones:

  • indexOf(element): Finds the first index of the provided element in the array.
  • reverse(): Reverses the array in place.
  • splice(index, deleteCount, itemsToInsert): Changes the original array by removing or replacing existing elements and/or adding new elements in place.
TypeScript
1let fruits: string[] = ['apple', 'banana', 'cherry']; 2 3// Inserting an element 'avocado' at position 1 using .splice() 4fruits.splice(1, 0, 'avocado'); 5console.log(fruits); // Output: [ 'apple', 'avocado', 'banana', 'cherry' ] 6 7// Finding index of an element using .indexOf() 8let index: number = fruits.indexOf('banana'); 9console.log(index); // Output: 2 10 11// Reverse the fruits array 12fruits.reverse(); 13console.log(fruits); // Output: [ 'cherry', 'banana', 'avocado', 'apple' ]
Lesson Summary and Practice Overview

Excellent work! Throughout this TypeScript journey, while dealing with Simple Data Structures, you've explored multi-dimensional arrays and navigated through advanced operations.

Now it's time to reinforce your knowledge with hands-on practice. Try creating tasks such as managing a restaurant menu with categories containing their own specific dishes. Are you ready for the next stage of our TypeScript quest? Let's move on!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.