TypeScript Academy · Lesson

Nested Destructuring Patterns

Type deeply nested destructuring expressions.

Nested Destructuring Patterns is a free TypeScript Academy lesson on CoddyKit — lesson 4 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.

Reaching Into Nested Data

Nested destructuring extracts values from objects within objects in a single statement. It is concise, but it interacts with types in ways worth understanding — and it can hurt readability if overused.

Destructuring a Nested Property

Mirror the object's shape on the left-hand side. To reach data.user.name, nest a pattern under user.

const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada

The Outer Name Is Not Bound

A subtle trap: in { user: { name } }, user is only a path, not a binding. You get name, but no variable called user exists afterward.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

Typing Nested Destructuring

Annotate with the full nested shape after the pattern. Each level mirrors the object structure.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

Named Types Read Better

Inline nested shapes get unwieldy fast. A named interface keeps the annotation clean while still allowing nested extraction.

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

Extracting Both Levels

If you need the outer object too, extract it separately, then destructure its members in another step. This is often clearer than deep nesting.

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

Combining Nesting With Defaults

Defaults can appear at any level. Provide a fallback for a possibly-missing nested field right where you bind it.

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

Defaulting Missing Sub-Objects

When a whole nested object may be absent, default it to {} before destructuring its fields — otherwise accessing a property of undefined throws.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

Nested Array Inside Object

You can mix object and array patterns. Here we grab the first tag from a nested array in one line.

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

Readability Trade-offs

Deep nested patterns save lines but can obscure intent. Three levels deep with defaults becomes hard to scan. If a reader has to pause, split it into steps.

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

A Balanced Example

One level of nesting with a couple of fields is usually the sweet spot — concise without being cryptic.

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

Quick Check

Test your understanding of nested destructuring.

Recap

Nested destructuring mirrors the object shape to reach inner values; outer keys are paths, not bindings, so only the innermost names become variables. Annotate with the full nested shape or a named type, default missing sub-objects to {} before destructuring their fields, and mix in array patterns as needed. Keep nesting shallow — split deep patterns into steps for readability.

Frequently asked questions

Is the “Nested Destructuring Patterns” lesson free?

Yes — the full text of “Nested Destructuring Patterns” 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 “Nested Destructuring Patterns”?

Type deeply nested destructuring expressions. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Nested Destructuring Patterns” 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