Destructuring
Unpack, in place.
Pull values out of objects and arrays directly into named bindings β with renames, defaults, nesting, and rest patterns layered on top.
Defaults trigger only on undefined
const { x = 10 } = { x: null } gives you null, not 10. Defaults fire only when the source value is strictly undefined.
Self-documenting signatures
Destructuring in parameters turns function f(opts) into function f({ name, age, role = "member" }). The shape of the input is visible at the call site.
Rest gathers what's left
In arrays: const [head, ...tail] = list. In objects: const { id, ...rest } = record strips one key β perfect for forwarding props.
The two-line swap
[a, b] = [b, a] is the only swap idiom you need. No temp variable, no XOR tricks.
Try it 3 examples
Object destructuring with rename and default
JSintroOne statement pulls four bindings out of user: company is renamed to employer, role defaults to Engineer because the source has no role key, and city is reached through a nested pattern β so the output reads "role":"Engineer","city":"London".