Skip to main content

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.

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. 
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. 
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. 
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. 
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. 
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. 
const metrics = { cpu_load: 45, mem_usage: 1024, uptime: 9999 };

const { cpu_load: cpuPercentage, ...remainingMetrics } = metrics;
// cpuPercentage === 45
// remainingMetrics === { mem_usage: 1024, uptime: 9999 }
Master JavaScript with Deep Grasping Methodology!Learn More