Chapter 10: Destructuring Assignment in JavaScript (ES6) with Real Use Cases

Destructuring Assignment in JavaScript (ES6)

Destructuring is a powerful ES6 feature that allows you to unpack values from arrays or properties from objects into distinct variables — making code more readable and concise. It helps avoid manual extraction using index or dot notation.

🧪 Array Destructuring – Basics

function getMarks() {
  return [70, 80, 90];
}

const [maths, english, computer] = getMarks();

console.log(maths);     // 70
console.log(english);   // 80
console.log(computer);  // 90
  

Explanation: The values returned from the function are unpacked directly into maths, english, and computer.

🔁 Skipping Values

const numbers = [1, 2, 3, 4];

const [first, , third] = numbers;
console.log(first); // 1
console.log(third); // 3
  

Note: You can skip unwanted values using empty commas.

📦 Array Destructuring with Rest

const [a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a);     // 10
console.log(b);     // 20
console.log(rest);  // [30, 40, 50]
  

📌 Destructuring Without Declaration

let maths, english;
[maths, english] = [85, 92];

console.log(maths);   // 85
console.log(english); // 92
  

📚 Object Destructuring – Basics

const student = {
  id: 101,
  name: 'Ayesha',
  age: 22
};

const {name, age} = student;
console.log(name); // Ayesha
console.log(age);  // 22
  

🧱 Nested Object Destructuring

const profile = {
  user: 'Rahul',
  contact: {
    email: 'rahul@example.com',
    phone: '9999988888'
  }
};

const {contact: {email, phone}} = profile;

console.log(email); // rahul@example.com
console.log(phone); // 9999988888
  

🔁 Destructuring in Loops (Real-World)

const users = [
  {
    name: "Rajesh",
    age: 20,
    family: {
      father: 'Niru Bhai',
      mother: 'Jasoda'
    }
  },
  {
    name: "Karim",
    age: 22,
    family: {
      father: 'Saqib',
      mother: 'Nisha'
    }
  }
];

for (let {name, family: {mother}} of users) {
  console.log(`Name: ${name}, Mother: ${mother}`);
}
  

Output:

Name: Rajesh, Mother: Jasoda
Name: Karim, Mother: Nisha
  

🧪 Practical Marksheet with Nested Destructuring

const student = {
  id: 120,
  name: "Aman",
  marks: {
    hindi: 88,
    maths: 95,
    computer: 90
  }
};

const {marks: {maths, computer}} = student;

console.log(maths);     // 95
console.log(computer);  // 90
  

📘 Assignments: Practice Destructuring

1. Write a function that returns three colors in an array and destructure them into separate variables.
2. Given an object with name, age, and nested address, extract the city using nested destructuring.
3. Loop through an array of products. For each product, destructure and log name and price.
4. Use rest syntax to store remaining scores from an array into a new array.
5. Destructure an object and rename the extracted properties using aliasing (const {name: studentName}).

📌 Summary

• Array Destructuring: Unpacks values from arrays into variables.
• Object Destructuring: Extracts properties from objects into variables.
• Nested Destructuring: Allows extraction from deep object structures.
• Rest Syntax: Gathers remaining values into an array.
• Works perfectly in for...of loops and real-time APIs/data handling.