Object destructuring is a syntax feature introduced in ES6 that lets you unpack properties from an object directly into individual variables. Instead of writing const name = user.name; followed by const age = user.age;, you can pull both values out in a single line. It's one of the most commonly used modern JavaScript features, and you'll see it constantly in function parameters, imports, and React-style code.

The main benefit is readability — destructuring makes it immediately obvious which properties of an object a piece of code actually cares about, without repeating the object name over and over.

Basic Syntax

You wrap the variable names you want in curly braces on the left side of an assignment, matching the property names on the object:

const user = {
  name: "Aditi",
  age: 27,
  city: "Pune"
};

// Without destructuring
const name1 = user.name;

// With destructuring
const { name, age, city } = user;

console.log(name, age, city);

Output:

Aditi 27 Pune

The variable names on the left must match the property names on the object — order doesn't matter, unlike with array destructuring, where position is everything.

Renaming and Default Values

Sometimes the property name on the object doesn't match the variable name you want to use, or the property might not exist at all. Destructuring handles both cases:

const product = { id: 101, title: "Keyboard" };

// Rename "title" to "productName" while destructuring
const { title: productName, price = 0 } = product;

console.log(productName); // renamed
console.log(price);       // uses the default, since product.price doesn't exist

Output:

Keyboard
0

You can combine renaming and a default value together: { title: productName = "Untitled" }.

Nested Destructuring

When an object contains another object, you can destructure straight through to the inner properties by mirroring the shape of the data:

const order = {
  id: 55,
  customer: {
    name: "Rahul",
    address: { city: "Mumbai" }
  }
};

const { customer: { name, address: { city } } } = order;
console.log(name, city);

Output:

Rahul Mumbai

This pattern shows up constantly in function parameters too — a function can destructure an options object right in its parameter list, like function greet({ name, age }) { ... }, which avoids an extra line inside the function body just to unpack values.