How Does Destructuring Work?

Destructuring is a syntax that pulls values out of an object or an array and binds them to names in one step. It is the inverse of building an object from named variables, and it replaces a lot of repeated property access.

There are four forms you should be able to name. Object destructuring uses curly braces and matches property names. Array destructuring uses square brackets and matches by position. Renaming assigns to a different local name using a colon. Defaults fill in a value when the property is missing, using an equals sign. Rest collects everything you did not name, using three dots.

Nesting works too. If you destructure an object whose property is itself an object, you can go deeper by nesting another pattern inside the first one, which lets you reach a nested value in a single statement without a chain of intermediate variables.

The main benefit is that destructuring separates the shape of the data from the code that uses it. When a function takes an options object, destructuring the parameter makes the accepted keys obvious to a reader and to a type checker, and it means the function body never repeats the options prefix. It also gives you a natural place to put defaults, which is usually the only reason a function signature looked complicated in the first place.

Object destructuring matches property names. Renaming uses a colon, defaults use an equals sign, and a rest element collects the properties you did not name. Array destructuring matches by position instead.

const user = { name: "Ada", age: 36, address: { city: "London" } };

const { name, age, address: { city } } = user;
console.log(name);   // "Ada"
console.log(age);    // 36
console.log(city);   // "London"

// Rename and supply a default:
const { name: userName = "Guest", country = "Unknown" } = user;
console.log(userName);   // "Ada"
console.log(country);    // "Unknown"

// Rest collects the properties you did not name:
const { name: _name, ...rest } = user;
console.log(Object.keys(rest));   // ["age", "address"]

// Arrays match by position:
const [first, second, ...others] = [10, 20, 30, 40];
console.log(first);   // 10
console.log(second);  // 20
console.log(others);   // [30, 40]

Two details catch people out. First, a default only kicks in when the property is missing or holds the empty value; a property that exists with the value null keeps the null, because only missing or empty values trigger the fallback. Second, the rest element in an object pattern copies the remaining own enumerable properties into a new plain object, which is a tidy way to strip one field out of an object before passing it along, though it does create a shallow copy.

Another detail is that the array rest element must be last, and that a hole in an array destructuring pattern is skipped with an empty slot, so you can jump to the third element by leaving the first two positions empty.