Object Destructuring

🔸 What is Destructuring?

Destructuring lets you quickly take values from arrays or objects and store them in variables.

🔹 Basic Object Example

Without Destructuring :

let person = {
  firstName: 'John',
  lastName: 'Doe'
};

let firstName = person.firstName;
let lastName = person.lastName;

console.log(firstName); // John
console.log(lastName);  // Doe

With Destructuring :

let person = {
  firstName: 'John',
  lastName: 'Doe'
};

// Destructuring
let { firstName, lastName } = person;

console.log(firstName); // John
console.log(lastName);  // Doe

You can give object properties new variable names using originalName: newName syntax.

Example:

let person = { firstName: 'John', lastName: 'Doe' };

let { firstName: fname, lastName: lname } = person;

console.log(fname); // John
console.log(lname); // Doe

• The identifier before the colon (:) is the property of the object and the identifier after the colon is the variable.

✔️ Setting Default Values

1. You can set default values for missing properties:

let person = {
  firstName: 'John',
  lastName: 'Doe',
  currentAge: 28
};

let {
  firstName,
  lastName,
  middleName = 'xyz',
  currentAge: age = 18
} = person;

console.log(middleName); // 'xyz'
console.log(age);        // 28

xyz
28

2. If the property does exist :

let person = {
  firstName: 'John',
  lastName: 'Doe',
  middleName: 'C.',
  currentAge: 28
};

let {
  firstName,
  lastName,
  middleName = 'xyz',
  currentAge: age = 18
} = person;

console.log(middleName); // 'C.'
console.log(age);        // 28

C.
28

❇️ Nested object destructuring

• You can access and destructure nested objects directly using the same syntax, drilling into deeper levels.

• In simple words, Nested object destructuring allows you to extract values from an object that contains another object inside it.

Example 1: Destructuring Nested Properties

let employee = {
  id: 1001,
  name: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

let {
  name: {
    firstName,
    lastName
  }
} = employee;

console.log(firstName); 
console.log(lastName);

John
Doe

Example 2: Extract Nested Properties and the Whole Nested Object

let employee = {
  id: 1001,
  name: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

let {
  name: { firstName, lastName }, // Extract nested properties
  name                           // Also assign the entire 'name' object
} = employee;

console.log(firstName); 
console.log(lastName);  
console.log(name);     

John
Doe
{ firstName: 'John', lastName: 'Doe' }

🔷 Destructuring Function Parameters

Destructuring in function parameters means you can directly extract values from an object inside the function's parameter list—without having to access them manually inside the function.

🧱 Traditional Way (Without Destructuring)

let display = (person) => {
  console.log(`${person.firstName} ${person.lastName}`);
};

let person = {
  firstName: 'John',
  lastName: 'Doe'
};

display(person);

🧠 Explanation:

• The function receives the whole person object.

• Inside the function, it accesses person.firstName and person.lastName manually.

John Doe

✅ Destructuring in Parameters (Simplified Way)

let display = ({ firstName, lastName }) => {
  console.log(`${firstName} ${lastName}`);
};

let person = {
  firstName: 'John',
  lastName: 'Doe'
};

display(person);

🧠 Explanation (In Simple Words):

• The function still receives the person object.

• But instead of writing person.firstName inside the function,

  it destructures firstName and lastName directly in the parameter list.

• It's cleaner and easier to read, especially when using many properties.

John Doe