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

April 4, 2026

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

Create an object with multiple properties
Use destructuring syntax {}
Extract values directly into variables
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.

📌 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.