Destructuring Tuples

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 17 of 73.

While accessing tuple elements by index works perfectly, there's an even more elegant way to extract values from tuples: destructuring. This JavaScript feature works seamlessly with TypeScript's typed tuples, allowing you to unpack tuple values into separate variables in a single line.

Array destructuring uses square brackets on the left side of an assignment to create new variables that correspond to each position in the tuple:

let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;

console.log(id);   // 42 (TypeScript knows this is a number)
console.log(name); // "Alice" (TypeScript knows this is a string)

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a tuple named employee that holds a number (employee ID) followed by a string (employee name). Initialize it with the ID 1001 and the name "Sarah Johnson".

Use destructuring to extract the values from the employee tuple into two separate variables named empId and empName.

Create another tuple named coordinates that holds two numbers representing latitude and longitude coordinates. Initialize it with the values 40.7128 and -74.0060.

Use destructuring to extract the values from the location tuple into two separate variables named latitude and longitude.

Print the destructured variables in the following order, each on a separate line:

Print the employee ID
Print the employee name
Print the latitude
Print the longitude

Cheat sheet

Destructuring allows you to extract values from tuples into separate variables in a single line using square brackets:

let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;

console.log(id);   // 42 (TypeScript knows this is a number)
console.log(name); // "Alice" (TypeScript knows this is a string)

TypeScript maintains type information for each destructured variable based on the tuple's type definition.

Try it yourself

// TODO: Write your code here
// Create the employee tuple with ID 1001 and name "Sarah Johnson"
// Use destructuring to extract empId and empName
// Create the coordinates tuple with values 40.7128 and -74.0060 (avoid using 'location' as variable name)
// Use destructuring to extract latitude and longitude
// Print all four variables in the specified order

// Print the results (uncomment and modify as needed)
// console.log(empId);
// console.log(empName);
// console.log(latitude);
// console.log(longitude);

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Destructuring Tuples

Cheat sheet

All lessons in Introduction To TypeScript