> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript Object Destructuring
Object destructuring is a syntactic expression in JavaScript that allows the extraction of properties from an object and their immediate assignment to distinct local variables. It utilizes an object literal-like syntax on the left-hand side of an assignment operation to map property keys to variable identifiers.
## Basic Syntax
By default, the declared variable identifier must exactly match the property key of the source object.
```javascript theme={"dark"}
const user = { id: 42, handle: 'dev_user' };
const { id, handle } = user;
// id === 42
// handle === 'dev_user'
```
## Destructuring `null` or `undefined`
Attempting to destructure `null` or `undefined` throws a runtime `TypeError`. During destructuring, the JavaScript engine implicitly calls the internal `ToObject()` method on the right-hand side value, which fails for `null` and `undefined`.
```javascript theme={"dark"}
const { id } = null;
// TypeError: Cannot destructure property 'id' of 'null' as it is null.
const { name } = undefined;
// TypeError: Cannot destructure property 'name' of 'undefined' as it is undefined.
```
## Aliasing (Assigning to New Variable Names)
To assign an extracted property to a variable with a different name, use the `sourceKey: targetVariable` syntax.
```javascript theme={"dark"}
const user = { id: 42 };
const { id: userId } = user;
// userId === 42
// 'id' is not defined as a variable
```
## Computed Property Names
Object destructuring supports computed property names via bracket notation, allowing property extraction using dynamic keys evaluated at runtime. When using a computed property name, a target variable alias must be explicitly provided.
```javascript theme={"dark"}
const dynamicKey = 'handle';
const user = { id: 42, handle: 'dev_user' };
const { [dynamicKey]: userHandle } = user;
// userHandle === 'dev_user'
```
## Default Values
A variable can be assigned a default value, which will be used if the extracted property is strictly `undefined` (it will not trigger on `null` or falsy values).
```javascript theme={"dark"}
const user = { id: 42, role: undefined };
const { role = 'guest', status = 'active' } = user;
// role === 'guest'
// status === 'active'
```
## Aliasing with Default Values
Aliasing and default values can be combined. The syntax evaluates left-to-right: `sourceKey: targetVariable = defaultValue`.
```javascript theme={"dark"}
const user = { id: 42 };
const { id: userId = 0, role: userRole = 'guest' } = user;
// userId === 42
// userRole === 'guest'
```
## Nested Destructuring
Destructuring can traverse nested object structures. Only the innermost identifiers are declared as variables; the intermediate keys act solely as traversal paths.
```javascript theme={"dark"}
const user = {
id: 42,
profile: {
email: 'dev@example.com'
}
};
const { profile: { email } } = user;
// email === 'dev@example.com'
// 'profile' is not defined as a variable
```
## Function Parameter Destructuring
Destructuring patterns can be applied directly within a function's parameter list. This unpacks the properties of an object passed as an argument into local variables scoped to the function's execution context.
```javascript theme={"dark"}
const user = { id: 42, handle: 'dev_user' };
function getUserHandle({ handle }) {
return handle;
}
getUserHandle(user); // Returns 'dev_user'
```
## The Rest Property (`...`)
The rest syntax collects all remaining enumerable own properties that were not explicitly destructured into a new object. It must be the final element in the destructuring pattern.
```javascript theme={"dark"}
const user = { id: 42, handle: 'dev_user', role: 'admin' };
const { id, ...metadata } = user;
// id === 42
// metadata === { handle: 'dev_user', role: 'admin' }
```
## Assignment Without Declaration
Destructuring can be applied to previously declared variables. However, the entire assignment statement must be wrapped in parentheses. Without parentheses, the JavaScript engine parses the leading `{` as the start of a block statement rather than an object literal pattern, resulting in a syntax error.
```javascript theme={"dark"}
let id, handle;
const user = { id: 42, handle: 'dev_user' };
({ id, handle } = user);
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
