Object Destructuring

Object destructuring is a concise syntax for extracting properties from an object into named local variables. Unlike array destructuring which uses position, object destructuring uses property names, so the variable order does not matter.

Basic Syntax

Wrap the property names in curly braces on the left side of an assignment. To store a property under a different variable name, use propertyName: localName.

Default Values

Add = defaultValue after a property name to supply a fallback when the property is undefined.

Nested Destructuring

You can destructure nested objects in a single expression by mirroring the object structure on the left side.

In Function Parameters

Destructuring is especially powerful in function signatures — it makes the expected shape of an argument explicit and gives each extracted property a meaningful local name without boilerplate.

Example

const person = { name: 'Bob', age: 25, city: 'Paris' };
const { name, age } = person;
console.log(name, age); // Bob  25
const { name: fullName, city: location } = person;
console.log(fullName, location); // Bob  Paris
const { country = 'Unknown' } = person;
console.log(country); // Unknown
const user = { id: 1, address: { street: 'Main St', zip: '12345' } };
const { address: { street, zip } } = user;
console.log(street, zip); // Main St  12345
function display({ name, age = 0 }) {
  return name + ' is ' + age;
}
console.log(display({ name: 'Eve', age: 28 })); // Eve is 28

JAVASCRIPT

Full Editor

Pro Tip

Always destructure in function parameters rather than accessing options.x inside the function body — it serves as self-documenting inline documentation of what properties the function actually uses.

Related Resources

JavaScript Reference

Complete tag & property list

JavaScript How-To Guides

Step-by-step practical guides

JavaScript Exercises

Practice what you've learned