Destructuring
Destructuring pulls values out of arrays and objects into variables. It helps make assignments, function parameters, and return values more direct and expressive.
Overview
Destructuring pulls values out of arrays and objects into variables. It helps make assignments, function parameters, and return values more direct and expressive.
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.
Related links
Powered by web-features