Destructuring in JavaScript

So far in this series, you’ve learned how to work with arrays and manipulate data using powerful methods.

But if you look at real-world JavaScript code, you’ll notice something.

Developers rarely access data like this:

const user = {
  name: "Shikhar",
  age: 25
};

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

Instead, you’ll often see something like this:

const { name, age } = user;

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

This is called destructuring.

And once you get used to it, you’ll start using it everywhere.

---

What is Destructuring?

Destructuring is a way to extract values from arrays or objects and assign them to variables in a cleaner way.

Instead of manually accessing each value, you can pull them out in one step.

---

Array Destructuring

Let’s start with arrays.

const arr = [10, 20, 30];

const [a, b, c] = arr;

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

The position matters here.

• a gets index 0

• b gets index 1

• c gets index 2

---

Skipping Values

const arr = [10, 20, 30];

const [first, , third] = arr;

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

You can skip values using commas.

---

Default Values

const arr = [10];

const [a, b = 20] = arr;

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

If a value is missing, default is used.

---

Rest Operator with Arrays

const arr = [1, 2, 3, 4];

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

console.log(first); // 1
console.log(rest);  // [2, 3, 4]

This collects remaining elements.

---

Object Destructuring

Now objects.

const user = {
  name: "Shikhar",
  age: 25
};

const { name, age } = user;

Here, names must match property keys.

---

Renaming Variables

const { name: userName } = user;

console.log(userName);

You can rename variables while destructuring.

---

Default Values in Objects

const { city = "Unknown" } = user;

console.log(city);

---

Nested Destructuring

const user = {
  name: "Shikhar",
  address: {
    city: "Delhi"
  }
};

const {
  address: { city }
} = user;

console.log(city);

---

Destructuring in Function Parameters

This is very common.

function greet({ name, age }) {
  console.log(name + " is " + age);
}

greet({ name: "Shikhar", age: 25 });

Cleaner than accessing inside function.

---

Why Destructuring Matters

Let’s compare.

Without destructuring:

const user = {
  name: "Shikhar",
  age: 25
};

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

With destructuring:

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

Less code, more clarity.

---

Destructuring with Arrays + Methods

const users = [
  { name: "Shikhar" },
  { name: "Rahul" }
];

users.map(({ name }) => console.log(name));

This is very common in real-world code.

---

Combining with Rest and Spread

const user = {
  name: "Shikhar",
  age: 25,
  city: "Delhi"
};

const { name, ...rest } = user;

console.log(name);
console.log(rest);

---

Common Mistakes

1. Wrong order in array destructuring

const [a, b] = [10, 20];

Order matters.

2. Wrong key name in object destructuring

const { username } = user; // undefined

3. Forgetting default values

Leads to undefined issues.

4. Deep destructuring errors

const { address: { city } } = user;

Will break if address is undefined.

Real-World Example

const response = {
  data: {
    user: {
      name: "Shikhar",
      age: 25
    }
  }
};

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

console.log(name, age);

This is very common when working with APIs.

---

Why This Topic is Important

• Used in almost every modern JS codebase

• Makes code readable

• Reduces repetition

• Frequently asked in interviews

Putting It All Together

function processUsers(users) {
  return users.map(({ name, age }) => {
    return `\({name} is \){age}`;
  });
}

const users = [
  { name: "Shikhar", age: 25 },
  { name: "Rahul", age: 30 }
];

console.log(processUsers(users));

---

Final Thought

Destructuring is not just syntax. It changes how you write and think about code. Instead of repeatedly accessing values, you directly work with them.

This makes your code cleaner, faster to write, and easier to understand.