Module 10 · ES6+ Features

Destructuring

Intermediate10m read8m practice18m total

ES6DestructuringObjectsArraysInterview Syntax

Introduction

Destructuring is ES6 syntax for unpacking values from arrays and properties from objects into local bindings. It turns repetitive indexing like user.profile.name or items[0] into a compact pattern that mirrors the shape of the data.

Interviewers use destructuring to test whether you understand defaults, renaming, nested patterns, rest properties, and the subtle rule that defaults run only for undefined, not for null or other falsy values.

Why This Matters

Modern JavaScript APIs return objects and arrays constantly: React props, hook tuples, API responses, config objects, and promise results. Destructuring lets you write concise code without losing precision. In interviews, it often appears inside output-prediction puzzles because it combines evaluation order, default values, and object property lookup.

Theory

Array destructuring

Array patterns read by position. const [first, second] = values binds first to index 0 and second to index 1. You can skip positions with commas, provide defaults with =, collect the remaining items with ...rest, and swap variables without a temporary value using [a, b] = [b, a].

Object destructuring

Object patterns read by property name. const { id, name } = user binds id from user.id and name from user.name. Renaming uses property: localName, as in const { name: displayName } = user. Defaults can be added after the local binding: const { retries = 3 } = options.

Defaults are only for `undefined`

A destructuring default runs when the matched value is exactly undefined or the property is missing. It does not run for null, 0, false, or "". This is one of the most common interview traps.

Nested patterns

Nested destructuring mirrors nested data: const { profile: { city } } = user. Be careful: if an intermediate object is undefined, destructuring throws. Use a default object (profile: { city } = {}) or optional chaining when the parent may be absent.

Function parameters

Destructuring in parameters is powerful for option objects: function connect({ host, port = 443 } = {}). The outer = {} protects callers who pass no argument; the inner defaults protect missing properties.

Visual Diagrams

Patterns mirror the data shape

Array data                 Array pattern
['Ada', 'Lovelace']         const [first, last] = row
   |        |                       |      |
   v        v                       v      v
 first    last                  row[0]  row[1]

Object data                Object pattern
{ id: 7, name: 'Ada' }      const { id, name } = user
    |        |                       |     |
    v        v                       v     v
   id      name                  user.id user.name

Array destructuring is positional; object destructuring is name-based.

Code Examples

Array and object patterns

The pattern on the left side describes where each binding should come from.

Loading…

Swapping and defensive parameter destructuring

Destructuring works in assignments and function parameters, not only in declarations.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1const [a = 'A', b = 'B', c = 'C'] = [undefined, null, ''];
2console.log(a);
3console.log(b);
4console.log(c === '');
5 
6const { count = 10, label: name = 'missing' } = {
7  count: 0,
8  label: undefined
9};
10console.log(count);
11console.log(name);

Predict the output #2

javascript

1let x = 1;
2let y = 2;
3 
4[x, y] = [y, x + y];
5 
6console.log(x);
7console.log(y);

Coding Exercises

Normalize a nested user response

Medium

Implement normalizeUser(response) using destructuring. It should return { id, name, city, tags }. The response may omit profile, address, or tags. Use defaults so missing city becomes 'Unknown' and missing tags becomes an empty array.

Interview Questions

1What is the difference between array destructuring and object destructuring?

Array destructuring is position-based: [first] reads index 0. Object destructuring is property-name-based: { first } reads the first property regardless of property order. Object destructuring can rename with property: localName; arrays skip positions with commas.

Asked at:MicrosoftMetaAmazon

Follow-ups

When do destructuring defaults run?
How do you safely destructure a nested optional object?

2Why does `{ value = 10 } = { value: null }` keep `null`?

Destructuring defaults run only when the matched value is undefined or missing. null is an explicit value, so the default is not used. The same is true for 0, false, and "".

Quiz

1. What is logged by `const { x = 5 } = { x: null }; console.log(x);`?

2. Which syntax renames `user.name` to a local variable `label`?

Summary

Array destructuring reads by position; object destructuring reads by property name.
Defaults run only for `undefined`, not for `null` or other falsy values.
Renaming uses `property: localName`; nested patterns mirror nested data.
Use default objects in nested patterns when intermediate properties may be missing.

Cheat Sheet

Array: const [first, second = 0, ...rest] = values.

Object: const { id, name: displayName, active = true } = user.

Nested: const { profile: { city } = {} } = user.

Swap: [a, b] = [b, a].

Default rule: only undefined triggers defaults.