Gyaan

Destructuring

beginner ES6 destructuring objects arrays

Destructuring is an ES6 feature that lets us unpack values from arrays or properties from objects into individual variables. Instead of accessing things one by one, we can grab multiple values in a single line. It makes our code cleaner and easier to read.

Object destructuring

The basic idea is simple — we use curly braces on the left side of the assignment and match the property names:

const user = { name: "Manish", age: 25, city: "Pune" };

const { name, age } = user;
console.log(name); // "Manish"
console.log(age);  // 25

Rename variables

Sometimes the property name isn’t what we want to use in our code. We can rename it with a colon:

const { name: fullName, age: userAge } = user;
console.log(fullName); // "Manish"
console.log(userAge);  // 25

Default values

If a property doesn’t exist, we can provide a fallback:

const { name, country = "India" } = user;
console.log(country); // "India" (user doesn't have a country property)

Array destructuring

For arrays, we use square brackets. The values are assigned based on position, not name:

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

const [first, second, third] = colors;
console.log(first);  // "red"
console.log(second); // "green"

Skip elements

We can skip elements by leaving empty spots with commas:

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

Rest with destructuring

We can use ...rest to collect the remaining elements into a new array:

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

Nested destructuring

We can destructure nested objects and arrays too. Just match the structure:

const user = {
  name: "Manish",
  address: {
    city: "Pune",
    zip: "411001"
  }
};

const { address: { city, zip } } = user;
console.log(city); // "Pune"
console.log(zip);  // "411001"

For nested arrays:

const matrix = [[1, 2], [3, 4]];
const [[a, b], [c, d]] = matrix;
console.log(a, d); // 1, 4

Function parameter destructuring

This is one of the most practical uses of destructuring. Instead of passing an object and accessing properties inside the function, we can destructure right in the parameter:

// Without destructuring
function greet(user) {
  console.log(`Hi ${user.name}, age ${user.age}`);
}

// With destructuring — much cleaner
function greet({ name, age }) {
  console.log(`Hi ${name}, age ${age}`);
}

greet({ name: "Manish", age: 25 }); // "Hi Manish, age 25"

This pattern is super common in React components and API handlers.

Practical use: swapping variables

Before destructuring, swapping two variables required a temporary variable. Now we can do it in one line:

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

In simple language, destructuring is just a shorthand for pulling out values. Curly braces {} for objects (match by name), square brackets [] for arrays (match by position). Once we get used to it, we will use it everywhere.

References