Destructuring in JavaScript: pulling values out of objects and arrays

Before 2015, reading three properties from an object took three lines that all repeated the name of that object. Destructuring does the same thing in one statement, and it is now everywhere: in React components, in imports, in function signatures.

It is not a new capability, only a shorter way of writing something the language already did.

Definition

Destructuring is a syntax that extracts values from an array, or properties from an object, and assigns them straight to variables in a single statement.

The idea fits in one sentence: you put on the left of the equals sign the shape of what you expect on the right. Curly braces for an Object, square brackets for an Array.

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

// Long form
const theName = user.name;
const theCity = user.city;

// Destructured, strictly equivalent
const { name, city } = user;
console.log(theName === name, theCity === city); // true true

// On an array, position decides
const [first, second] = [10, 20];
console.log(first + second); // 30

On an object, names are what matter and order is irrelevant. On an array it is the opposite: position decides, and an element you do not want is skipped by leaving an empty comma.

Defaults, renaming and the rest

Three options build on the basic syntax, and they are the ones you meet most often in real code.

• Default value. const { role = "member" } = user; supplies a fallback when the property is missing. Careful: it only applies when the value is undefined. A property holding null, 0 or an empty string keeps its own value.
• Renaming. const { name: handle } = user; creates a variable called handle. Useful when two objects expose the same key, or when the original name collides with an existing variable.
• The rest. Combined with Rest (...), it isolates one property and gathers all the others into a new object, without touching the original.

In a function signature

This is the use that improves readability the most: the function states in its very first line exactly what it needs.

function card({ title, price, currency = "USD" }) {
  return title + ": " + price + " " + currency;
}

console.log(card({ title: "Course", price: 49 }));
// "Course: 49 USD"

The caller passes an object, the order of keys is irrelevant, and adding a parameter later breaks no existing call. That is why modern libraries almost always accept an options object rather than a list of positional arguments.

Frequently asked questions

The variable is created and holds undefined, with no error. Destructuring a value that is itself null or undefined, however, throws immediately, because the language cannot look for properties inside it. An options object protects itself by defaulting to an empty object.

Yes, by repeating the syntax: const { address: { city } } = user; pulls city out directly. It reads fine across two levels, becomes unreadable beyond that, and it fails when the intermediate level is missing. In that situation Optional chaining (?.) is the safer tool.

Both use braces or brackets, but they work in opposite directions. Destructuring takes values out of a structure, on the left of the equals sign. Spread (...) pours values into a new structure, on the right. You meet them together in React components, where incoming props are destructured then passed back down. Our React course leans on this syntax from start to finish, which makes it worth mastering first.