> ## 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 Destructured Parameter
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:**
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
function processUser({ id: userId, name: userName }) {
console.log(userId, userName);
}
```
**Default Values:**
Default values are assigned if the extracted property is strictly `undefined`.
```javascript theme={"dark"}
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:**
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
function processCoordinates([x, , z]) {
console.log(x, z);
}
```
## Advanced Mechanics
**Nested Destructuring:**
Destructuring can traverse deeply nested structures directly within the parameter signature.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
// 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
