Object Destructuring
Learn how to unpack properties from objects into variables using destructuring, including renaming, default values, nested patterns, and combining destructuring with the rest pattern.
Reading Time
15 min
Lesson
Lesson 23 of 48
Introduction
Object destructuring is the sibling of array destructuring you just learned — same underlying idea, different syntax. Instead of pulling values out of an array by position, object destructuring pulls values out of an object by property name, using curly braces instead of square brackets. It's one of the most frequently used features in modern JavaScript, especially for reading data out of API responses, configuration objects, and React props.
Basic Object Destructuring
Console Output
Click “Run” to see the console output here.
Property Order Does Not Matter
Unlike array destructuring, object destructuring matches by property name rather than position, so the order in which you list variables in the pattern makes no difference. As long as the variable name matches a key on the object, it will be pulled out correctly, no matter where it appears in the pattern or in the object itself.
Order Independence Example
Console Output
Click “Run” to see the console output here.
Renaming Variables
Sometimes the property name on the object clashes with a variable you already have, or simply isn't the name you'd like to use in your code. You can rename a destructured property using a colon: { propertyName: newVariableName }. The left side of the colon must match the object's actual key; the right side is the local variable name you get to choose.
Renaming Example
Console Output
Click “Run” to see the console output here.
Default Values
Just like with arrays, you can supply a default value for a property that might be missing or undefined on the object. The default is only used when the property doesn't exist at all, or when its value is explicitly undefined — it will not override a value like 0, false, or an empty string, since those are not undefined. Defaults can also be combined with renaming.
Default Values Example
Console Output
Click “Run” to see the console output here.
Nested Object Destructuring
Objects often contain other objects, and destructuring patterns can dig straight into that nested structure. Each level of curly braces in the pattern mirrors a level of nesting in the data, letting you reach directly into deeply nested properties without creating an intermediate variable for every level along the way.
Nested Destructuring Example
Console Output
Click “Run” to see the console output here.
Destructuring in Function Parameters
Object destructuring shines in function parameter lists, especially for functions that accept a single options object instead of a long list of positional arguments. This makes the call site self-documenting, because every argument is passed as a named property, and it makes the function signature self-documenting, because every expected property is spelled out up front.
Destructuring in Parameters Example
Console Output
Click “Run” to see the console output here.
Combining with the Rest Pattern
Object destructuring can grab a few named properties while collecting everything else into a new object using the rest pattern (...). This is especially useful for separating a couple of properties you want to handle specially from the rest of the object, which you might want to pass along unchanged or log for debugging.
Rest Pattern Example
Console Output
Click “Run” to see the console output here.
Array vs. Object Destructuring
| Aspect | Array Destructuring | Object Destructuring |
|---|---|---|
| Syntax | Square brackets [] | Curly braces {} |
| Matching | By position | By property name |
| Renaming | Not applicable | Use { key: newName } |
| Skipping | Empty comma slot | Simply omit the key |
| Rest pattern | ...rest collects remaining elements | ...rest collects remaining properties |
Destructuring Props in React
If you've seen React components, you've almost certainly seen object destructuring already: function Button({ label, onClick }) { ... } destructures the label and onClick props directly out of the props object in the function signature — the exact same pattern covered above, just applied to component props.
Destructuring null or undefined Throws
Attempting to destructure properties from null or undefined throws a TypeError, because there's no object to read properties from. This commonly happens when a function parameter is destructured but called without any argument at all — const { name } = undefined; fails, so if a parameter might be omitted, give the whole parameter a default empty object: function greet({ name } = {}) { ... }.