Destructuring unpacks values in one line. Modern codebases use it in every file — these are the patterns worth internalizing.
The everyday set
const student = { name: "Priya", dept: "CSE", marks: { cn: 88 } };
const { name, dept } = student; // basics
const { name: fullName } = student; // rename
const { hostel = "Day scholar" } = student; // default
const { marks: { cn } } = student; // nested
const [first, second] = [1, 2, 3];
const [head, ...rest] = [1, 2, 3]; // rest
[a, b] = [b, a]; // swap without temp!
// function parameters — the biggest win
function Card({ title, image, tags = [] }) { ... }
// vs function Card(props) { props.title... }
// loops
for (const [key, value] of Object.entries(obj)) { ... }
const [, second] = arr; // skip with commasWhere it bites
- Destructuring
null/undefinedthrows — guard withconst { x } = data ?? {} - Deep nesting gets unreadable past 2 levels — extract in steps instead
React hooks are array destructuring: const [count, setCount] = useState(0). Full lesson: Destructuring.