Destructuring Assignment in JavaScript (ES6) – Extract Object Values Easily

📌 INTRODUCTION

Destructuring assignment is a powerful feature introduced in ES6 that allows you to extract values from objects and arrays in a clean and concise way.

Instead of accessing properties one by one, destructuring lets you:

• Write shorter and cleaner code
• Improve readability
• Work efficiently in React and modern JavaScript

---

📘 PROBLEM STATEMENT

👉 Write a program to extract values from an object using destructuring assignment.

---

💡 CONCEPTS USED

• Object Destructuring
• ES6 Syntax
• Variables and Objects

---

🧠 LOGIC EXPLANATION

1. Create an object with multiple properties
2. Use destructuring syntax {}
3. Extract values directly into variables
4. Display the result

---

💻 PROGRAM CODE (Using Destructuring)

const student = {
  name: "Kanchan",
  age: 18,
  course: "BCA"
};

// Destructuring assignment
const { name, age, course } = student;

console.log("Name:", name);
console.log("Age:", age);
console.log("Course:", course);

---

🖥️ OUTPUT

Name: Kanchan
Age: 18
Course: BCA

---

🔍 STEP-BY-STEP EXPLANATION

• { name, age, course } extracts values from object
• Variable names must match object keys
• Values are directly assigned to variables

---

⚡ OLD METHOD (WITHOUT DESTRUCTURING)

const student = {
  name: "Kanchan",
  age: 18,
  course: "BCA"
};

const name = student.name;
const age = student.age;
const course = student.course;

console.log(name, age, course);

---

🎯 ADVANCED EXAMPLES

1. Rename Variables

const { name: studentName, age: studentAge } = student;

console.log(studentName, studentAge);

---

2. Default Values

const { city = "Delhi" } = student;

console.log(city);

---

3. Array Destructuring

const numbers = [10, 20, 30];

const [a, b, c] = numbers;

console.log(a, b, c);

---

🌟 ADVANTAGES OF DESTRUCTURING

• Reduces code length
• Improves readability
• Avoids repetitive object access
• Widely used in React props and APIs

---

📚 REAL-WORLD USE CASE

• Extracting API response data
• Handling React props
• Working with JSON objects

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is destructuring in JavaScript?

👉 A way to extract values from objects or arrays into variables.

---

Q2. Which ES version introduced destructuring?

👉 ES6 (ECMAScript 2015)

---

Q3. Can we rename variables during destructuring?

👉 Yes, using key: newName.

---

Q4. Can destructuring be used with arrays?

👉 Yes, using square brackets [].

---

Q5. What happens if a property does not exist?

👉 It returns undefined unless a default value is provided.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 Arrow Function in JavaScript – Program 1
👉 Template Literals in JavaScript – Program 2

---

📌 CONCLUSION

Destructuring assignment is an essential concept in modern JavaScript. It simplifies code and is heavily used in frameworks like React.

👉 Master this concept to write cleaner and more efficient programs.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites