TypeScript Academy · Lesson

Array and Tuple Destructuring

Destructure arrays and tuples with correct element types.

Array and Tuple Destructuring is a free TypeScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Positional Destructuring

Array destructuring binds variables by position rather than by name. With tuples, each position carries a specific type, giving you precise, ordered extraction.

Basic Array Destructuring

Square brackets on the left pull elements out by index order. For a plain array, every binding shares the array's element type.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Annotating a Tuple Pattern

Annotate by giving the binding a tuple type after the pattern. Each position gets its own type — here a number then a string.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

Types Follow Position

In a tuple, the type at each index is fixed. The first binding is a number, the second a string — swapping the values would be a type error.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Skipping Elements With Commas

Leave a gap with an empty comma slot to skip a position you do not need. The skipped element's type is simply ignored.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Destructuring With Rest

A rest element gathers the remaining items into an array. For a tuple, its type reflects the leftover positions.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Rest Type From a Tuple

When you destructure a tuple with a rest, TypeScript infers the rest variable as a tuple of the remaining elements, preserving their types.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Swapping Variables

A neat trick array destructuring enables: swapping two values without a temporary. Types must be compatible for the swap to typecheck.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Destructuring in Function Returns

Functions that return tuples pair beautifully with destructuring — the React useState pattern is exactly this.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Default Values in Array Patterns

Provide a default for a position that might be undefined. The default applies only when the element is missing or undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Nested Array Destructuring

You can destructure arrays inside arrays in one statement. Types nest accordingly, but keep readability in mind for deep structures.

const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4

Quick Check

Test your understanding of array and tuple destructuring.

Recap

Array destructuring binds by position; annotate with a tuple type after the pattern so each index gets its own type. Skip elements with empty comma slots, gather the remainder with a rest element (which stays a tuple of leftover positions), and supply defaults for possibly-missing positions. Tuple returns plus destructuring power patterns like useState.

Frequently asked questions

Is the “Array and Tuple Destructuring” lesson free?

Yes — the full text of “Array and Tuple Destructuring” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Array and Tuple Destructuring”?

Destructure arrays and tuples with correct element types. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Array and Tuple Destructuring” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy