Destructuring
The destructuring syntax is a JavaScript syntax that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. It can be used in locations that receive data (such as the left-hand side of an assignment or anywhere that creates new identifier bindings).
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 49 | 14 | 41 | 8 | 49 | 8 | |
computed property names Computed property names | 49 | 14 | 41 | 10 | 49 | 10 |
rest in arrays Rest in arrays | 49 | 16 | 41 | 9.1 | 49 | 9.3 |
rest in objects Rest in objects | 60 | 79 | 55 | 11.1 | 60 | 11.3 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.
Syntax
JAVASCRIPT
// Object spread assignment
const { name, age, role = 'user' } = user;
// Array spread assignment
const [first, , third] = [1, 2, 3];
// Renaming
const { name: userName } = user;
// Nesting
const { address: { city } } = { address: { city: 'Tokyo' } };
// Function arguments
function greet({ name, age }) {
return `${name} (age: ${age})`;
}Live demo
Object destructuring
Extract properties, rename them, and provide defaults close to the read site.
JavaScript
Output
Press the Run button
Array destructuring
Read by position, skip values, capture the rest, and even swap variables.
JavaScript
Output
Press the Run button
Use cases
-
Reading configuration objects
Extract only the properties you need and keep default values close to the variable definition.
-
Working with arrays
Pick selected positions, skip values, and collect the rest without manual indexing.
Cautions
- Deep destructuring can get hard to scan quickly; stop when it starts hiding the real shape of the data.
- Defaults run only for undefined values, not for null or other falsy values.
Accessibility
- Destructuring itself has no direct accessibility impact, but clearer state names make UI logic easier to maintain correctly.