Destructuring in JavaScript

So there's this thing in JavaScript that I kept seeing in other people's code and just copying without fully understanding it. Lines like const { name, age } = user or const [first, second] = items. Looks clean, but when I first started I had no idea what was actually happening there.

Turns out it's called destructuring and once it clicked, I started using it everywhere.

What Does Destructuring Mean?

Destructuring just means pulling values out of an array or object and putting them into their own variables — in one line instead of several.

That's it. It's not some advanced concept. It's just a shortcut for unpacking data.

Before destructuring existed, you'd write something like this:

const user = { name: "Ankur", age: 22, city: "Jaipur" };

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

Three separate lines to get three values out of one object. Works fine, but gets repetitive fast. Destructuring collapses all of that into one line.

Destructuring Arrays

With arrays, destructuring pulls values out by position.

const colors = ["red", "green", "blue"];

const [first, second, third] = colors;

console.log(first);  // red
console.log(second); // green
console.log(third);  // blue

The variable on the left maps to the index on the right. first gets index 0, second gets index 1, and so on.

You can skip elements you don't need using a comma:

const [, , last] = colors;
console.log(last); // blue

Those two empty commas just skip index 0 and 1. You only grab what you actually need.

This comes up a lot with things like useState in React — that's array destructuring:

const [count, setCount] = useState(0);

Same concept. useState returns an array with two items, and you destructure them into named variables right away.

Destructuring Objects

With objects, destructuring pulls values out by key name.

const user = { name: "Ankur", age: 22, city: "Jaipur" };

const { name, age, city } = user;

console.log(name); // Ankur
console.log(age);  // 22
console.log(city); // Jaipur

The variable names on the left have to match the keys in the object. That's how it knows which value to grab.

If you want to use a different variable name, you can rename it with a colon:

const { name: fullName, city: location } = user;

console.log(fullName);  // Ankur
console.log(location);  // Jaipur

You're saying — "grab the name key, but store it in a variable called fullName." Useful when a key name conflicts with something else in your code or just isn't descriptive enough.

Default Values

What if the key doesn't exist in the object? Without a default, you get undefined.

const { name, score } = user;
console.log(score); // undefined

You can set a fallback value that kicks in when the key is missing:

const { name, score = 0 } = user;
console.log(score); // 0

Same works for arrays:

const [a, b, c = 10] = [1, 2];
console.log(c); // 10

c didn't exist at index 2, so it fell back to 10. Clean way to handle missing data without extra if-checks.

Destructuring in Function Parameters

This is where it gets really useful in day-to-day code. Instead of accepting a full object and then pulling things out inside the function, you destructure right in the parameter:

function greet({ name, city }) {
  console.log(`Hey \({name}, you're from \){city}?`);
}

greet({ name: "Ankur", city: "Jaipur", age: 22 });
// Hey Ankur, you're from Jaipur?

The function only grabs what it needs from the object. Age is passed in but ignored — the function doesn't care about it.

Before destructuring this looked like:

function greet(user) {
  console.log(`Hey \({user.name}, you're from \){user.city}?`);
}

Works the same, but user.name and user.city repeated everywhere gets messy in longer functions. Destructuring in the parameter cleans that right up.

Nested Destructuring

Objects inside objects can also be destructured, though I'd say don't go too deep or it gets hard to read.

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

const { name, address: { city } } = person;

console.log(name); // Rahul
console.log(city); // Mumbai

You're telling it — go into address, then pull out city. One level of nesting is fine. Beyond that, just pull the nested object out separately and destructure it on the next line.

Before vs After — Side by Side

Here's a real-ish scenario. You get a user object back from an API and need a few values from it.

Before destructuring:

const response = { id: 1, name: "Ankur", email: "ankur@mail.com", role: "admin" };

const id = response.id;
const name = response.name;
const role = response.role;

console.log(id, name, role);

After destructuring:

const { id, name, role } = response;

console.log(id, name, role);

Same result, four lines become one. And as the object gets bigger and you need more fields, the gap grows even more.

Why It Actually Matters

Destructuring isn't just about saving lines. A few real benefits:

Less repetition. user.name, user.email, user.role repeated five times in a function is noisy. Destructure once at the top, use clean variable names throughout.

Clearer intent. When you see const { name, role } = user at the top of a function, you immediately know exactly which fields that function cares about. It's almost like documentation.

Cleaner function signatures. Passing objects into functions and destructuring in the parameter keeps things tidy without sacrificing flexibility.

Works great with APIs. Most API responses are nested objects. Destructuring lets you pull exactly what you need without chaining response.data.user.profile.name everywhere.

Once you start using destructuring, going back to writing obj.key everywhere feels unnecessarily tedious. It's one of those features that seems small until you realize how often you're using it.

The next post I'm planning is on the Spread and Rest operators — which pair naturally with destructuring and show up constantly in real code.