Working with Arrays

Store More Than One Value

Imagine you’re tracking all the programming languages you want to learn. You could create a separate variable for every language, but there’s a better way.

An array stores multiple values together in an ordered collection. Instead of managing many separate variables, you can organize related information in one place.

const languages: string[] = [
  "HTML",
  "CSS",
  "TypeScript"
];

console.log(languages);

The square brackets contain the array’s elements. The string[] annotation tells TypeScript that every element should be a string.

Keep Your Collections Consistent

TypeScript lets you describe the type of values an array should contain. This helps prevent unexpected data from entering your collection.

const scores: number[] = [80, 95, 100];
const names: string[] = ["Moe", "Jordan"];
const completed: boolean[] = [true, false];

console.log(scores);
console.log(names);
console.log(completed);

Each array has a different element type: numbers, strings, or booleans.

const scores: number[] = [80, 95, 100];

// TypeScript error:
scores.push("excellent");

Because scores is a number[], adding a string is not allowed.

Access Individual Items

Each array element has a position called an index. TypeScript arrays use zero-based indexing, meaning the first element is at index 0.

const skills: string[] = [
  "HTML",
  "CSS",
  "TypeScript"
];

console.log(skills[0]);
console.log(skills[1]);
console.log(skills[2]);

The first element is skills[0], not skills[1]. If you access an index outside the array, JavaScript normally returns undefined at runtime.

Change an Item in Your Array

You can update an existing array element by assigning a new value to its index.

const skills: string[] = [
  "HTML",
  "CSS",
  "JavaScript"
];

skills[2] = "TypeScript";

console.log(skills);

Notice that we declared the array using const. That’s fine: const prevents reassigning the array variable itself, but you can still update its elements.

Grow Your Collection with Push

The push() method adds one or more elements to the end of an array.

const skills: string[] = ["HTML", "CSS"];

skills.push("TypeScript");
skills.push("Python");

console.log(skills);

The push() method also returns the new array length, although you don’t have to use that returned value.

Remove the Last Element with Pop

The pop() method removes the final element from an array and returns that element. If the array is empty, it returns undefined.

const skills: string[] = [
  "HTML",
  "CSS",
  "TypeScript"
];

const removed = skills.pop();

console.log(removed);
console.log(skills);

Use push() to add to the end and pop() to remove from the end.

Find Out How Many Items You Have

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

const skills: string[] = [
  "HTML",
  "CSS",
  "TypeScript"
];

console.log(skills.length);

The length is 3, even though the final index is 2. That’s because indexes start at zero, while length counts the number of elements.

Work Through Every Element

Arrays become especially powerful when combined with loops. Instead of manually accessing every index, you can repeat instructions for each element.

const skills: string[] = [
  "HTML",
  "CSS",
  "TypeScript"
];

for (let i: number = 0; i < skills.length; i++) {
  console.log(skills[i]);
}

The loop starts at index 0 and continues while i is less than the array’s length.

A Simpler Alternative: for…of

const skills: string[] = [
  "HTML",
  "CSS",
  "TypeScript"
];

for (const skill of skills) {
  console.log("Learning " + skill);
}

A for...of loop gives you each value directly, without requiring an index variable.

Let TypeScript Recognize Your Collection

Just as TypeScript can infer the types of ordinary variables, it can often infer array element types.

const developers = ["Moe", "Jordan"];
const levels = [1, 2, 3];

developers.push("Taylor");
levels.push(4);

// Type error:
// levels.push("five");

TypeScript infers that developers contains strings and levels contains numbers.

Build a Learning List

Let’s create a list of skills Moe is learning, add a new skill, and display everything using a loop.

const developer: string = "Moe";
const skills: string[] = ["HTML", "CSS"];

skills.push("TypeScript");

console.log(developer + "'s learning list:");

for (let i: number = 0; i < skills.length; i++) {
  console.log((i + 1) + ". " + skills[i]);
}

console.log("Total skills: " + skills.length);

This small program combines typed arrays, array methods, indexes, loops, and string output into one practical example.