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