What Destructuring Means?

Destructuring is a syntax that lets you unpack values from arrays or objects into separate variables.

Instead of writing:

const user = { name: "Krish", age: 20 };
const name = user.name;
const age = user.age;

You can write:

const { name, age } = user;

This reduces boilerplate and improves readability.

Destructuring Arrays

In arrays, destructuring is based on position (index).

Example:

const numbers = [10, 20, 30];

const [a, b, c] = numbers;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

Skipping values:

const [first, , third] = numbers;

console.log(first); // 10
console.log(third); // 30

Using rest operator:

const [head, ...rest] = numbers;

console.log(head); // 10
console.log(rest); // [20, 30]

Destructuring Objects

Object destructuring is based on property names, not position.

Example:

const user = {
  name: "Krish",
  age: 20,
  city: "Mumbai"
};

const { name, age } = user;

console.log(name); // Krish
console.log(age); // 20

Default Values

Destructuring allows setting default values if a property does not exist.

Example:

const user = { name: "Krish" };

const { name, age = 18 } = user;

console.log(name); // Krish
console.log(age);  // 18

In arrays:

const numbers = [10];

const [a, b = 20] = numbers;

console.log(a); // 10
console.log(b); // 20

Benefits of Destructuring

1. Cleaner Code

2. Better Readability

3. Easier Function Parameters

   function greet({ name, age }) {
     console.log(`Hello \({name}, age \){age}`);
   }
   

4. Supports Defaults and Flexibility