This content originally appeared on DEV Community and was authored by Tamilselvan K
JavaScript is full of powerful features that make coding cleaner and more efficient. One such feature is destructuring.
What is Destructuring?
Destructuring is a syntax in JavaScript that lets you unpack values from arrays or extract properties from objects into distinct variables — all in a clean, readable way.
Array Destructuring
Let’s start with arrays.
Traditional way:
const colors = ['red', 'green', 'blue'];
const first = colors[0];
const second = colors[1];
console.log(first, second); // red green
With destructuring:
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first, second); // red green
You can also skip elements:
const [ , , third] = colors;
console.log(third); // blue
Object Destructuring
Objects are even more common in real apps. Destructuring makes it easy to pull out properties.
Traditional way:
const user = { name: 'Alice', age: 25 };
const name = user.name;
const age = user.age;
console.log(name, age); // Alice 25
With destructuring:
const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25
Why Use Destructuring?
- Cleaner code
- Fewer lines
- More readable
- Useful in modern JavaScript frameworks and libraries
This content originally appeared on DEV Community and was authored by Tamilselvan K