Destructuring in JavaScript

You’ve definitely written code like this:

const user = {
  name: "Tejas",
  age: 20,
  role: "SDE"
};

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

At this point you're not coding, you're just repeating the same thing again and again like your gym motivation that lasts 2 days.

This is where destructuring comes in.

What destructuring means

Destructuring simply means:

👉 Taking values out of arrays or objects and storing them into variables easily.

Instead of doing this:

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

You can do this:

const { name, age } = user;

Same result, less typing, less headache.

Destructuring objects

Let’s take a simple object.

const person = {
  name: "Piyush",
  age: 21,
  profession: "SDE"
};

Without destructuring (old school struggle)

const name = person.name;
const age = person.age;

With destructuring

const { name, age } = person;

console.log(name); // Piyush
console.log(age);  // 21

How it works (simple visual)

Think of it like you're picking things out:

person → { name, age } → variables

Or:

{
  name: "Piyush",
  age: 21
}

↓

name = "Piyush"
age = 21

Renaming variables

Sometimes you don’t want the same variable name.

const { name: userName } = person;

console.log(userName); // Piyush

Destructuring arrays

Arrays also support destructuring, but here order matters.

const friends = ["Rudra", "Yash", "Tirth"];

Without destructuring

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

With destructuring

const [first, second] = friends;

console.log(first);  // Rudra
console.log(second); // Yash

How it works (visual)

["Rudra", "Yash", "Tirth"]

↓

first  = "Rudra"
second = "Yash"

Skipping values

If you don’t need some values:

const [first, , third] = friends;

console.log(third); // Tirth

That empty space is you ignoring someone… just like they ignore your messages.

Default values

Sometimes value doesn’t exist, and instead of getting undefined, you can set a default.

Object example

const user = {
  name: "Tejas"
};

const { name, age = 18 } = user;

console.log(age); // 18

Array example

const nums = [1];

const [a, b = 10] = nums;

console.log(b); // 10

Before vs After (why this is useful)

Let’s say you have this:

const user = {
  name: "Tejas",
  age: 20,
  role: "SDE"
};

Without destructuring

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

With destructuring

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

Cleaner, shorter, and you don’t keep typing user like it’s your password.

Benefits of destructuring

• Less repetitive code

• Cleaner code

• Easier to read

• Very useful in functions

• Makes your code look less beginner level

Final thoughts

Destructuring is one of those things which looks small but saves a lot of effort.

Try this:

• Take any object or array

• Rewrite it using destructuring

• Try breaking it, try default values, try skipping

You’ll understand it way better by playing with it.

And yeah, don’t forget to enjoy coding.