What problem destructuring solves
It lets you declare which parts of a larger structure you actually care about.
Without destructuring, you often repeat long property paths and create unclear intermediate variables. With destructuring, you can declare in one place which pieces of data matter.
That improves maintenance because the header of a function already shows which properties it really uses.
1
Object
Extract by property name.
- `const { id, email } = user`
- You can rename and set defaults
2
Array
Extract by position.
- `const [first, second] = list`
- Useful for tuples and ordered return values
3
Rename
Avoid conflicts and clarify intent.
- `const { name: uiName } = profile`
- Very useful when mapping API fields
4
Default value
Prevent unnecessary `undefined` values.
- `const { avatar = '/default.png' } = user`
- Helpful in UI rendering
