Skip to main content
A destructured parameter is a JavaScript feature that allows a function to unpack properties from objects or elements from arrays passed as arguments directly within the function signature. It evaluates the incoming argument and binds the extracted data to distinct, locally scoped variables during the function invocation phase.

​
Object Destructured Parameters

Object destructuring in parameters matches the keys of the incoming object argument to variable names defined in the signature. Basic Syntax: 
function processUser({ name, age }) {
  console.log(name, age);
}
Aliasing (Renaming Variables): You can bind an extracted property to a variable with a different identifier using the key: variableName syntax. 
function processUser({ id: userId, name: userName }) {
  console.log(userId, userName);
}
Default Values: Default values are assigned if the extracted property is strictly undefined. 
function processUser({ role = 'guest', status = 'active' }) {
  console.log(role, status);
}

​
Array Destructured Parameters

Array destructuring in parameters relies on the iterable protocol, binding variables based on their positional index in the incoming array argument. Basic Syntax: 
function processCoordinates([x, y, z]) {
  console.log(x, y, z);
}
Elision (Skipping Elements): Commas can be used to skip indices without binding them to variables. 
function processCoordinates([x, , z]) {
  console.log(x, z);
}

​
Advanced Mechanics

Nested Destructuring: Destructuring can traverse deeply nested structures directly within the parameter signature. 
function processPayload({ metadata: { timestamp, source } }) {
  console.log(timestamp, source);
}
Rest Binding: The rest operator (...) collects all remaining enumerable properties (for objects) or remaining iterable elements (for arrays) into a new object or array. It must be the final binding in the destructured pattern. 
function processRecords([firstRecord, ...remainingRecords]) {
  console.log(firstRecord, remainingRecords);
}

function processConfig({ theme, ...otherSettings }) {
  console.log(theme, otherSettings);
}
Parameter Fallbacks (Preventing TypeErrors): If a function with a destructured parameter is invoked without an argument, the JavaScript engine attempts to destructure undefined, resulting in a TypeError. To prevent this, the entire destructured parameter can be assigned an empty object or array as a default fallback. 
// Throws TypeError if called as initialize()
function initialize({ port, host }) {}

// Safely defaults to an empty object, then applies property defaults
function initialize({ port = 8080, host = 'localhost' } = {}) {}
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!Learn More