Object Destructuring in JavaScript

Object destructuring is an ES6 feature that allows you to extract values from objects and assign them to variables in a concise way.

Simplifies code by avoiding repetitive property access (obj.prop)
Improves readability
Enables default values, renaming, and nested extraction

Basic Object Destructuring

Instead of accessing properties individually, destructuring allows you to extract multiple properties in one statement.

const person = { name: "Alice", age: 25, country: "India" };

// Traditional way
const name1 = person.name;
const age1 = person.age;

// Using destructuring
const { name, age } = person;

console.log(name); // "Alice"
console.log(age);  // 25

Assigning Default Values

You can assign default values to variables in case the property is undefined.

const person = { name: "Bob" };

const { name, age = 30 } = person;

console.log(name); // "Bob"
console.log(age);  // 30 (default value)

Renaming Variables

Destructuring allows you to assign properties to different variable names.

const person = { name: "Alice", age: 25 };

const { name: fullName, age: years } = person;

console.log(fullName); // "Alice"
console.log(years);    // 25

Nested Object Destructuring

You can destructure nested objects in a single statement.

const person = {
  name: "Alice",
  address: {
    city: "Mumbai",
    country: "India"
  }
};

const { name, address: { city, country } } = person;

console.log(name);    // "Alice"
console.log(city);    // "Mumbai"
console.log(country); // "India"

Destructuring in Function Parameters

Object destructuring can be used directly in function parameters for cleaner code.

const person = { name: "Bob", age: 40 };

function greet({ name, age }) {
  console.log(`Hello, I'm ${name} and I'm ${age} years old`);
}

greet(person); // "Hello, I'm Bob and I'm 40 years old"

Rest Operator with Destructuring

The rest operator (...) can be used to collect remaining properties.

const person = { name: "Alice", age: 25, country: "India" };

const { name, ...rest } = person;

console.log(name); // "Alice"
console.log(rest); // { age: 25, country: "India" }

Practical Use Cases

Extracting API response data:

const user = {
  id: 1,
  username: "john_doe",
  profile: { email: "[email protected]" }
};

const { username, profile: { email } } = user;
console.log(username, email); // "john_doe", "[email protected]"

Swapping variables (with array destructuring combined):

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

Function parameters with default values:

function createUser({ name = "Anonymous", age = 0 } = {}) {
  console.log(name, age);
}

createUser({ name: "Alice" }); // "Alice", 0
createUser();                   // "Anonymous", 0

Summary Table

Feature	Example	Notes
Basic Destructuring	`const { name, age } = person;`	Extract properties into variables
Default Values	`const { age = 30 } = person;`	Assign defaults if property is missing
Renaming Variables	`const { name: fullName } = person;`	Use different variable name
Nested Destructuring	`const { address: { city } } = person;`	Extract nested properties
Function Parameter Destructuring	`function greet({ name }) {}`	Simplifies parameter handling
Rest Operator	`const { name, ...rest } = person;`	Collect remaining properties