What Destructing means

pulling out a values out of arrays /object and storing them in variable in a shorter way

for array

without destructuring

const arr = [10, 20, 30];

const a = arr[0];
const b = arr[1];
const c = arr[2];

lot of repetition here

with destructuring

const arr = [10, 20, 30];

const [a, b, c] = arr;

same result

for object

without destructuring

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

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

with destructuring

const { name, age } = user;

whats heppening here

• take this array or object

• break it apart

• assgin value directly into variabble

thats why it called de-structuring

keypoints

• In array destructuring position matters

• In object destructuring key name matters

De-structuring Arrays

since we had got the very basic overview in above eg now ets see in brief

1. Position matters

const arr = [10, 20, 30];

const [a, b, c] = arr;

• a = 10

• b = 20

• c = 30

keep the order same

2. Skipping Values (very common)

const arr = [10, 20, 30];

const [a, , c] = arr;

• a → 10

• skip 20

• c → 30

That empty comma is intentional. Most people either don’t know this or avoid it.

3. Default Values (important edge case)

What if value is missing?

const arr = [10];

const [a, b = 50] = arr;

• a → 10

• b → 50 (because it wasn’t in array)

If you don’t set defaults, you get undefined.

4. Rest Operator (for flexibility)

This is where destructuring becomes powerful.

const arr = [10, 20, 30, 40];

const [a, ...rest] = arr;

• a → 10

• rest → [20, 30, 40]

Useful when:

• You don’t know array length

• You only care about first few values

5. Swapping Variables (clean trick)

Most people still do temp variable nonsense.

let a = 5;
let b = 10;

// swap
[a, b] = [b, a];

No temp variable. Cleaner, faster to read.

De-structuring Object

1. Key Names Matter (Most Important Rule)

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

const { name, age } = user;

you must match the key name

If the key doesn’t exist → you get undefined. No warnings, no errors.

2. Renaming

const user = {
  name: "Dushyant"
};

const { name: username } = user;

Now:

• username → "Dushyant"

This is super common when:

• API gives ugly names

• You want cleaner variable names

3. Default Values

const user = {
  name: "Dushyant"
};

const { name, age = 18 } = user;

• age → 18 (fallback)

Without this → undefined bugs everywhere.

Default values

whenever you are working with objecct you wont always get complete data. Missing fields are common - especially when dealing with apis or user input. Thats whee default values come in picture

default values

const user = {
  name: "Dushyant"
};

const { name, age = 21 } = user;

console.log(age); // 21

if age is not present it fall back to 21 instead of returning undefined.

Benefits of De-structuring

1. Removes Repetitive Code

Without destructuring, accessing object properties quickly becomes repetitive.

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

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

With destructuring, the same thing becomes much cleaner:

const { name, age } = user;

Less code, better readability, and easier maintenance

2. Cleaner Function Parameters

Destructuring really shines when used inside functions.

function printUser({ name, age }) {
  console.log(name);
  console.log(age);
}

Instead of repeatedly writing user.name and user.age, you directly extract what you need.

This makes your functions shorter and more focused.

3. Easier Data Handling (Real-World Example)

When working with API responses or nested objects, destructuring helps you pull out only the required data

const response = {
  status: 200,
  data: {
    name: "Dushyant",
    age: 20
  }
};

const { data: { name, age } } = response;