Lesson 2

Arrays let you store multiple values of the same type in a single ordered list. In TypeScript, you declare the type of elements the array holds by writing the type followed by square brackets, like string[] for an array of strings or number[] for an array of numbers. Each value in an array is stored at a numbered position called an index, starting at 0. You can access an item by writing the array name followed by the index in square brackets, like colors[0] to get the first element. Arrays are useful whenever you have a list of related items, such as a list of names, scores, or colors. TypeScript checks that you only add values of the correct type to the array, preventing mistakes like accidentally putting a number into a string array. You can also change values inside an array after it is created, add new items to the end, or remove the last item. With arrays, you can organize and work with collections of data in a clean and predictable way.

let colors: string[] = ["red", "green", "blue"];
console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);

You create an array by listing values inside square brackets and giving it a type.

• The type string[] means the array holds only string values.
• The colors "red", "green", and "blue" are stored at indexes 0, 1, and 2.
• colors[0] gets the first element, which is "red".
• Indexing always starts at 0 in programming, so the first item is at position 0.
• If you try to access an index that does not exist, you will get undefined.
• TypeScript will warn you if you try to put a number into a string[] array.

let numbers: number[] = [10, 20, 30, 40];
console.log(numbers.length);
console.log(numbers[0]);
console.log(numbers[3]);

Every array has a length property that tells you how many items it contains.

• numbers.length returns 4 because the array has four elements.
• The last element is at index length - 1, which is 3 in this case.
• numbers[0] gives the first element, and numbers[3] gives the last.
• The length stays the same when you only read or modify existing elements.
• You can use .length in a loop condition to process every element without guessing how many there are.
• A number[] array can hold any numbers, including negatives or decimals.

let fruits: string[] = ["apple", "banana", "cherry"];
fruits[1] = "mango";
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

You can change an element in an array by assigning a new value to its index.

• fruits[1] = "mango" replaces whatever was at index 1 with the new value "mango".
• Before the change, index 1 held "banana", but after the change it holds "mango".
• Index 0 and 2 are not affected by the change made to index 1.
• The new value must match the array's type, so you can only assign a string to a string[].
• Modifying an element does not change the array's length.
• This is useful when you need to update a specific item in a list, like changing a score or a name.

let scores: number[] = [90, 80];
scores.push(70);
console.log(scores.length);
console.log(scores[2]);

The push method adds a new element to the end of an array.

• scores.push(70) adds the number 70 as a new last element.
• After pushing, the array's length increases by one, from 2 to 3.
• The new element is placed at the next available index, which is 2.
• The value you push must match the array's type, so you can only push a number to a number[].
• push is a simple way to grow an array dynamically as you collect more data.

let items: number[] = [1, 2, 3];
let removed: number = items.pop();
console.log(removed);
console.log(items.length);

The pop method removes the last element from an array and returns it.

• items.pop() removes 3 (the last element) and stores it in removed.
• The array's length decreases by one, from 3 to 2.
• removed is typed as number because pop returns the element type.
• After pop, only [1, 2] remain in the array.
• pop is useful when you want to process items in last-in-first-out order, like undoing an action.

let names: string[] = ["Alice", "Bob", "Charlie"];
for (let firstName of names) {
  console.log(firstName);
}

A for...of loop lets you visit every element in an array one at a time.

• Naming a variable name, should often be avoided in browser enviroments, since it can interfere with the built-in global variable window.name
• The loop for (let firstName of names) goes through each element without needing an index.
• Each iteration gives you the next element directly, starting with "Alice", then "Bob", then "Charlie".
• The variable name automatically gets the type string because names is string[].
• The loop runs once for every item in the array, stopping automatically after the last one.
• for...of is ideal when you want to read or process each element without changing the array.
• TypeScript ensures you cannot accidentally use name as a number inside the loop.