JS 10

Perfect. We're now entering Modern JavaScript (ES6+)—the JavaScript you'll see in React, Next.js, Node.js, and remote jobs.

---

Chapter 10 — Destructuring ⭐⭐⭐⭐⭐

🎯 Goal (1 line)

Learn how to extract values from arrays and objects in one line instead of writing repetitive code.

Reality check: You'll see destructuring in almost every React project.

---

Think Like a Programmer

Suppose you have this object:

const user = {
  name: "Pramod",
  age: 28,
  city: "Bengaluru"
};

Without destructuring:

const name = user.name;
const age = user.age;
const city = user.city;

That's repetitive.

Instead:

const { name, age, city } = user;

console.log(name);
console.log(age);
console.log(city);

Output

Pramod
28
Bengaluru

Think of destructuring as:

📦 Open the box and take out only what you need.

---

Object Destructuring

const laptop = {
  brand: "Apple",
  price: 120000
};

const { brand, price } = laptop;

console.log(brand);
console.log(price);

Output

Apple
120000

---

Array Destructuring

Without destructuring:

const colors = ["Red", "Green", "Blue"];

const first = colors[0];
const second = colors[1];

Better:

const colors = ["Red", "Green", "Blue"];

const [first, second] = colors;

console.log(first);
console.log(second);

Output

Red
Green

---

Skip Values

const colors = ["Red", "Green", "Blue"];

const [first, , third] = colors;

console.log(first);
console.log(third);

Output

Red
Blue

The extra comma skips "Green".

---

Rename Variables

Sometimes you want a different variable name.

const user = {
  name: "Alice"
};

const { name: userName } = user;

console.log(userName);

Output

Alice

Notice:

• Property = name

• Variable = userName

---

Default Values

const user = {
  name: "Alice"
};

const { age = 18 } = user;

console.log(age);

Output

18

Since age doesn't exist, JavaScript uses the default value.

---

MCQs

---

Q1

What does destructuring do?

A. Deletes data

B. Extracts values into variables

C. Creates loops

D. Sorts arrays

✅ Answer

B

---

Q2

Output?

const user = {
  name: "Alice"
};

const { name } = user;

console.log(name);

A. Alice

B. name

C. undefined

D. Error

✅ Answer

A

---

Q3

Output?

const nums = [10, 20];

const [first] = nums;

console.log(first);

A. 10

B. 20

C. undefined

D. Error

✅ Answer

A

---

Q4

Output?

const nums = [10, 20];

const [, second] = nums;

console.log(second);

A. 10

B. 20

C. undefined

D. Error

✅ Answer

B

---

Q5

Which syntax is object destructuring?

A.

const [name] = user;

B.

const { name } = user;

C.

const (name) = user;

D.

const <name> = user;

✅ Answer

B

---

Q6

Which syntax is array destructuring?

A.

const { first } = colors;

B.

const [first] = colors;

C.

const (first) = colors;

D.

const <first> = colors;

✅ Answer

B

---

Q7

Output?

const user = {
  name: "Tom",
  age: 30
};

const { age } = user;

console.log(age);

A. 30

B. Tom

C. undefined

D. Error

✅ Answer

A

---

Q8

Output?

const colors = ["Red", "Green", "Blue"];

const [a, , c] = colors;

console.log(c);

A. Red

B. Green

C. Blue

D. Error

✅ Answer

C

---

Q9

Output?

const user = {
  name: "Alice"
};

const { age = 18 } = user;

console.log(age);

A. undefined

B. 18

C. Alice

D. Error

✅ Answer

B

---

Q10

Output?

const user = {
  name: "Alice"
};

const { name: userName } = user;

console.log(userName);

A. Alice

B. name

C. undefined

D. Error

✅ Answer

A

---

Q11

Find the bug.

const user = {
  name: "Bob"
};

const [name] = user;

A. No bug

B. Objects use {}, not []

C. Missing let

D. Missing return

✅ Answer

B

---

Q12

Output?

const fruits = ["Apple", "Banana"];

const [x, y] = fruits;

console.log(y);

A. Apple

B. Banana

C. undefined

D. Error

✅ Answer

B

---

Q13

Which code is cleaner?

A.

const name = user.name;
const age = user.age;

B.

const { name, age } = user;

✅ Answer

B

---

Q14

Output?

const book = {
  title: "JavaScript"
};

const { title } = book;

console.log(title);

A. JavaScript

B. title

C. undefined

D. Error

✅ Answer

A

---

Q15 (Hardest)

Predict the output.

const person = {
  name: "Rahul",
  city: "Mumbai"
};

const { name, city } = person;

console.log(`${name} lives in ${city}`);

A.

Rahul lives in Mumbai

B.

name lives in city

C. undefined

D. Error

✅ Answer

A

---

Mini Coding Challenge

const movie = {
  title: "Inception",
  year: 2010,
  rating: 9
};

const { title, rating } = movie;

console.log(title);
console.log(rating);

✅ Solution

Output:

Inception
9

---

Mini Project — User Card

const user = {
  name: "Pramod",
  age: 28,
  city: "Bengaluru"
};

const { name, age, city } = user;

console.log("Name:", name);
console.log("Age:", age);
console.log("City:", city);

✅ Output

Name: Pramod
Age: 28
City: Bengaluru

---

🚨 Common Beginner Mistakes

❌ Using [] for objects

Wrong:

const [name] = user;

Correct:

const { name } = user;

---

❌ Using {} for arrays

Wrong:

const { first } = colors;

Correct:

const [first] = colors;

---

❌ Variable name must match the property name

This won't work:

const user = {
  name: "Alice"
};

const { userName } = user;

console.log(userName); // undefined

If you want a different variable name:

const { name: userName } = user;

console.log(userName); // Alice

---

🧠 The 80/20 Cheat Sheet

// Object
const { name, age } = user;

// Array
const [first, second] = colors;

// Rename
const { name: userName } = user;

// Default value
const { age = 18 } = user;

---

💼 Real-World React Example

This is the kind of code you'll see constantly in React:

const user = {
  name: "Pramod",
  email: "pramod@example.com",
  isAdmin: true
};

const { name, email } = user;

console.log(name);
console.log(email);

Instead of repeatedly writing:

user.name
user.email
user.name
user.email

you extract them once and use the variables.

---

🎯 Interview Tip

A very common interview question is:

What's the difference between these?

const { name } = user;

and

const [name] = users;

Remember:

• {} → Objects

• [] → Arrays

That's enough to answer this question confidently.

---

📌 Next Chapter (Another Top 5 Skill)

Chapter 11 — Spread (...) & Rest (...) Operator

This is one of the most-used JavaScript features in React. You'll learn how to:

• Copy arrays and objects

• Merge arrays and objects

• Add items without changing the original data

• Collect multiple function arguments

These patterns are everywhere in modern JavaScript and React applications.