JavaScript Tutorial: Destructuring & Spread
Unpack arrays and objects elegantly, rename variables, set defaults, and spread data everywhere.
Modern JavaScript unpacking
Destructuring lets you pull values out of arrays and objects into variables in one clean line. It's used everywhere in modern JavaScript — function parameters, API responses, React props, import statements.
Once you know destructuring, you'll wonder how you ever lived without it.
What you'll learn in this JavaScript destructuring & spread tutorial
This interactive JavaScript tutorial has 9 hands-on exercises. Estimated time: 20 minutes.
- Array destructuring — Instead of accessing array elements by index one by one, destructure them into named variables in one line:
- Skip elements — Use commas to skip elements you don't need:
- Object destructuring — Object destructuring extracts properties into variables by name:
- Rename while destructuring — If the property name conflicts with an existing variable, rename it:
- Default values in destructuring — Set defaults for missing properties — they kick in when the property is undefined:
- Nested destructuring — Destructure nested objects and arrays inline:
- Destructuring in function params — The most common use of destructuring: directly in function parameters.
- Spread in function calls — Spread `...` works in function calls to expand an array into individual arguments:
- Build an API response handler — Final challenge — no starter code.
JavaScript Destructuring & Spread concepts covered
- Modern JavaScript unpacking