> ## 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 Renamed Destructuring
Renamed destructuring is a feature of JavaScript's object destructuring assignment that extracts a property's value from an object and binds it to a locally scoped variable using an identifier distinct from the original property key.
```javascript theme={"dark"}
const { sourcePropertyKey: targetBindingIdentifier } = objectReference;
```
In this syntax, the colon (`:`) does not denote a standard object literal key-value pair. Instead, it acts as a mapping operator. The token preceding the colon specifies the property key to look up on the evaluated object. The token following the colon declares the new variable identifier in the current lexical scope.
## Core Mechanics
When the JavaScript engine evaluates a renamed destructuring assignment, it performs a property lookup using the source key. The extracted value is then bound to the target identifier. The original property key is not introduced into the local scope as a variable.
```javascript theme={"dark"}
const record = { sys_id: 1048, status: 'active' };
// 'sys_id' is the source key, 'userId' is the new local binding
const { sys_id: userId } = record;
console.log(userId); // 1048
// console.log(sys_id); // ReferenceError: sys_id is not defined
```
## Integration with Other Destructuring Features
Renamed destructuring can be composed with other destructuring mechanics, such as default value assignments, nested destructuring, and computed property names.
**With Default Values**
If the source property resolves to strictly `undefined`, a default value can be assigned to the new identifier by appending the assignment operator (`=`) after the target identifier.
```javascript theme={"dark"}
const config = { theme: 'dark' };
const { layout: layoutStyle = 'grid' } = config;
// layoutStyle === 'grid'
```
**With Nested Destructuring**
Renaming can occur at any depth within a nested destructuring pattern. The colon dictates the traversal path, while the final token in the chain establishes the binding.
```javascript theme={"dark"}
const payload = { data: { user_token: 'abc123xyz' } };
const { data: { user_token: sessionToken } } = payload;
// sessionToken === 'abc123xyz'
```
**With Computed Property Names**
When the source property key is dynamic, bracket notation (`[]`) can be used on the left side of the colon to evaluate an expression as the source key, mapping it to a static target identifier.
```javascript theme={"dark"}
const dynamicKey = 'created_at';
const metadata = { created_at: '2023-10-01' };
const { [dynamicKey]: timestamp } = metadata;
// timestamp === '2023-10-01'
```
**With Rest Properties**
Renamed destructuring can be used alongside the rest operator (`...`), but the rest operator itself cannot be renamed during the assignment. It must collect the remaining unextracted properties into a standard identifier.
```javascript theme={"dark"}
const metrics = { cpu_load: 45, mem_usage: 1024, uptime: 9999 };
const { cpu_load: cpuPercentage, ...remainingMetrics } = metrics;
// cpuPercentage === 45
// remainingMetrics === { mem_usage: 1024, uptime: 9999 }
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
