What is destructuring in JavaScript?

Question

What is destructuring in JavaScript?

Answer

Destructuring lets you unpack values from arrays or objects into variables easily.

const user = { name: 'Ghazi', role: 'Engineer' };
const { name, role } = user;
console.log(name); // Ghazi

const numbers = [1, 2, 3];
const [first, , third] = numbers;
console.log(third); // 3

You can even rename variables:

const { role: position } = user;
console.log(position);

Real-World Example

Heavily used in React for props and state:

const { user, loading } = useAuth();

Quick Practice

Destructure an object {a:10, b:20} into variables and swap them using array destructuring.

Summary

Destructuring makes code cleaner and reduces repetitive property access.