Typescript chevron_right Arrays

Arrays

calendar_today schedule 3 min read

1. Welcome and Icebreaker:

  • Hello everyone! What’s the most interesting or complex data structure you’ve worked with?

2. Outline the Session:

  • Today, we’ll dive into Arrays in TypeScript.
  • We’ll cover: declaring arrays, accessing elements, and using basic array methods.
  • Learning Outcomes: You’ll be able to confidently create and manipulate arrays in TypeScript.
  • Let’s make this interactive!

3. Concept Explanation:

  • Arrays are ordered collections of values. In TypeScript, arrays can be typed, meaning you can specify the type of elements they can hold.
  • Declaring Arrays:
    • let list: number[] = [1, 2, 3]; (Syntax 1: type[])
    • let list: Array<number> = [1, 2, 3]; (Syntax 2: Generic array type Array<type>)
    • Both are equivalent.
  • Accessing Elements: Array elements are accessed using zero-based indexing. list[0] would give 1.
  • Basic Array Methods: TypeScript arrays have access to all standard JavaScript array methods, such as:
    • push(): Adds one or more elements to the end of an array.
    • pop(): Removes the last element from an array.
    • forEach(): Executes a provided function once for each array element.
    • map(): Creates a new array populated with the results of calling a provided function on every element.
    • filter(): Creates a new array with all elements that pass the test implemented by the provided function.
    • length: Property that returns the number of elements in the array.

4. Live Coding Demonstration:

// Declaring arrays
let numbers: number[] = [10, 20, 30, 40, 50];
let fruits: Array<string> = ["apple", "banana", "cherry"];

console.log("Numbers:", numbers);
console.log("Fruits:", fruits);

// Accessing elements
console.log("First number:", numbers[0]); // 10
console.log("Second fruit:", fruits[1]); // banana

// Modifying elements
fruits[1] = "blueberry";
console.log("Modified fruits:", fruits);

// Array length
console.log("Length of numbers array:", numbers.length); // 5

// Basic array methods
// push: Add to the end
fruits.push("date");
console.log("Fruits after push:", fruits); // ["apple", "blueberry", "cherry", "date"]

// pop: Remove from the end
let removedFruit = fruits.pop();
console.log("Removed fruit:", removedFruit); // date
console.log("Fruits after pop:", fruits); // ["apple", "blueberry", "cherry"]

// forEach: Iterate over elements
console.log("Iterating with forEach:");
numbers.forEach((num, index) => {
  console.log(`Number at index ${index}: ${num}`);
});

// map: Create a new array from existing array
let doubledNumbers: number[] = numbers.map(num => num * 2);
console.log("Doubled numbers:", doubledNumbers); // [20, 40, 60, 80, 100]

// filter: Create a new array with elements that pass a test
let evenNumbers: number[] = numbers.filter(num => num % 2 === 0);
console.log("Even numbers (original):", evenNumbers); // [10, 20, 30, 40, 50]

let oddNumbers: number[] = numbers.filter(num => num % 2 !== 0);
console.log("Odd numbers (original):", oddNumbers); // []

let numbersWithOdds: number[] = [1, 2, 3, 4, 5, 6];
let filteredOdds: number[] = numbersWithOdds.filter(num => num % 2 !== 0);
console.log("Filtered odd numbers:", filteredOdds); // [1, 3, 5]

// Array of mixed types (using union types or any)
let mixedArray: (string | number | boolean)[] = ["hello", 5, true];
console.log("Mixed array:", mixedArray);

let anyArray: any[] = [1, "world", false, { name: "Test" }];
console.log("Any array:", anyArray);

5. Tasks:

  • Short Exercise:
    1. Create an array of your favorite song titles (strings).
    2. Print the third song title to the console.
    3. Add a new song to the end of the array.
    4. Use the forEach method to print each song title prefixed with “Song: “.
    5. Create a new array containing the lengths of each song title using the map method.