Understanding Tuples and Arrays in TypeScript | CodeSignal Learn

Understanding Tuples and Arrays in TypeScript | CodeSignal Learn

Introduction and Lesson Objectives

Greetings, future TypeScript Voyager! Today, we're plunging into the cosmos of tuples and arrays within TypeScript. In programming terms, a tuple is like a box filled with different star samples — they are ordered, and different elements can be of distinct types. By the end of this lesson, we will be equipped to design, access, and maneuver TypeScript tuples and arrays proficiently.

Foundational Tuples and Arrays: The Basics

Visualize a tuple, or an array, as a star system in which each celestial body bears a distinctive characteristic. Here are a couple of methods to craft this cosmic system: Using brackets for arrays: TypeScript // Define array of first four planets let planets: string[] = ["Mercury", "Venus", "Earth", "Mars"]; console.log(planets); // Prints: ["Mercury", "Venus", "Earth", "Mars"] Using generic syntax for arrays: TypeScript // Define array of first four planets using generic Array type let planetsGeneric: Array<string> = ["Mercury", "Venus", "Earth", "Mars"]; console.log(planetsGeneric); // Prints: ["Mercury", "Venus", "Earth", "Mars"] Using brackets with a specific tuple type for tuples: TypeScript // Define tuple with planet and its position let earth: [string, number] = ["Earth", 3]; console.log(earth); // Prints: ["Earth", 3] Both techniques efficiently generate a tuple or array; opt for the one that best suits your needs!

Navigation using Indexing

Indexes in tuples and arrays are like galactic maps. Each element in a tuple/array has an index that starts from 0 . TypeScript // Access third planet in the array console.log(planets[2]); // Prints: "Earth" // Access first planet in the array console.log(planets[0]); // Prints: "Mercury" // Find the index of 'Mars' console.log(planets.indexOf("Mars")); // Prints: 3 The .indexOf() method helps us pinpoint the index of "Mars" within the planets array.

Array Properties: Inclined towards length

Measuring the length of a tuple or list can be likened to gauging the distance between galaxies. TypeScript uses the .length property for this purpose: TypeScript // Checks the number of planets in the array console.log(planets.length); // Prints: 4 It couldn't be simpler!

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Reassigning and Altering Tuple/Array Elements

Just as celestial entities may influence their cosmic coordinates, the elements within a tuple/array can be altered. We can substitute, append, or edit items inside our tuples or arrays. // Replace "Venus" with "Cybertron" planets[1] = "Cybertron"; console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars"] In the aforementioned instance, we replaced "Venus" (the second item at index 1) with "Cybertron". It's that effortless indeed! Wish to modify a value rather than completely replacing it? We can extract the item, perform our revisions, and then place it back into the tuple. // Append the string " - the Red Planet" to "Mars" planets[3] += " - the Red Planet"; // using the += operator to augment to the element console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars - the Red Planet"] In this example, we augmented the "Mars" element in the array by appending an additional string to it. As a result, "Mars" was replaced by "Mars - the Red Planet" . Altering tuples and arrays is a common operation in TypeScript. Hence, understanding how to reassign and alter elements is crucial for TypeScript developers!

Key Array Operations: push() and pop()

Two significant functions for interacting seamlessly with our array are - push(element) and pop() . push(element) adds the element to the end of the array. pop() removes the last element of the array, returning it as a result. For illustration - we will add "Pluto" using .push() and then remove it with .pop() : // Append 'Pluto' to the array planets.push("Pluto"); console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars - the Red Planet", "Pluto"] // Extract 'Pluto' from the array let pluto = planets.pop(); console.log(pluto); // Prints: "Pluto" console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars - the Red Planet"] In this process, you've learned how to append and remove array elements using .push() and .pop(), respectively.

TypeScript

// Append the string " - the Red Planet" to "Mars"
planets[3] += " - the Red Planet"; // using the += operator to augment to the element
console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars - the Red Planet"]

TypeScript

// Append 'Pluto' to the array
planets.push("Pluto");
console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars - the Red Planet", "Pluto"]

// Extract 'Pluto' from the array
let pluto = planets.pop();
console.log(pluto); // Prints: "Pluto"
console.log(planets); // Prints: ["Mercury", "Cybertron", "Earth", "Mars - the Red Planet"]