Destructuring, Spread, and Rest

Destructuring is syntactic sugar for pulling values out of arrays and objects into named variables. Spread and rest are the inverse — expand or collect values. Together they power React props, API response shaping, immutable state updates ({ ...state, count: state.count + 1 }), and function signatures. Once these three clicks, much modern JavaScript reads naturally.

Array destructuring

Array destructuring matches by position, not name. You can skip elements with commas, use defaults when values are undefined, and swap variables without a temp variable. It is the cleanest way to unpack coordinates, CSV rows, or the return value of functions that return tuples like [data, error].

255 128 0
1 3
10 5
2 1

Object destructuring

Object destructuring matches by property name. You can rename keys (const { name: userName }), set defaults, and nest destructuring for deep API JSON. Function parameters commonly destructure objects so callers pass readable option bags instead of positional arguments.

7 Sangam
Sangam
free
Sangam (admin)

Rest in destructuring — collect the remainder

Rest syntax (...rest) in destructuring gathers remaining elements into a new array or object. It must be the last pattern in the list. Common pattern: peel off id and spread the rest into an update payload — const { id, ...updates } = body — exactly what many REST PATCH handlers implement.

1 [2, 3, 4]
1
{ name: 'Ace', active: true }
[API] started
[API] ok

Spread — copy and merge

Spread expands iterables into individual elements or object properties. [...arr] and { ...obj } create shallow copies — nested objects are still shared references. Spread merge is left-to-right: later keys overwrite earlier ones. React setState and Redux reducers rely on this for immutable one-level updates.

{ theme: 'dark', lang: 'en' }
[1, 2, 3, 4]
99

Destructuring shines at function boundaries: accept options objects with defaults instead of long positional parameter lists. Spread copying is shallow — nested mutation bugs still happen if you forget structuredClone or deep immutable updates for nested state trees in React or Redux.

Nested destructuring defaults

Deep defaults like { user: { profile: { name = 'Guest' } = {} } = {} } mirror optional chaining for destructuring at assignment time. Use when unpacking known API shapes in one line; use ?. when reading unknown nested JSON incrementally in imperative code.

1. 1Array destructure by position; object destructure by key
2. 2Defaults apply when value is undefined
3. 3Rest must be last in destructure pattern
4. 4Spread merge overwrites keys left-to-right — shallow copy
5. 5Next lesson: prototypes and class syntax