Function parameter destructuring

ECMAScript 6 introduced the feature of function parameter destructuring, allowing direct destructuring of objects or arrays in function parameter positions, simplifying the extraction of values from complex data structures. This feature is similar to variable destructuring assignment but is specifically designed for function parameters, significantly improving code readability and conciseness.

Basic Syntax and Object Destructuring

The core syntax of function parameter destructuring involves using destructuring patterns in the parameter positions. For object destructuring, directly declare the property names to be extracted in the parameters:

function getUserInfo({name, age}) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const user = { name: 'Zhang San', age: 25, gender: 'male' };
getUserInfo(user); // Output: Name: Zhang San, Age: 25

When the passed object lacks the corresponding property, the destructured value will be undefined. Default values can be set for destructured parameters:

function setConfig({ width = 100, height = 200 } = {}) {
  console.log(`Width: ${width}, Height: ${height}`);
}

setConfig(); // Width: 100, Height: 200
setConfig({ width: 300 }); // Width: 300, Height: 200

Note the use of dual defaults here: = {} ensures no error is thrown when no parameter is passed, while property defaults handle missing specific properties.

Array Parameter Destructuring

Array destructuring parameters use square bracket syntax to extract values by position:

function getCoordinates([x, y]) {
  console.log(`X-coordinate: ${x}, Y-coordinate: ${y}`);
}

const point = [10, 20];
getCoordinates(point); // X-coordinate: 10, Y-coordinate: 20

Nested array destructuring also works:

function processMatrix([[a, b], [c, d]]) {
  console.log(a, b, c, d);
}

const matrix = [[1, 2], [3, 4]];
processMatrix(matrix); // 1 2 3 4

Mixed Destructuring and Renaming

Object destructuring supports property renaming and mixed destructuring:

function parseRequest({ 
  headers: { 'Content-Type': contentType }, 
  body: [firstItem] 
}) {
  console.log(contentType, firstItem);
}

const request = {
  headers: { 'Content-Type': 'application/json' },
  body: ['item1', 'item2']
};
parseRequest(request); // Output: application/json item1

Combining Default Parameters with Destructuring

Destructured parameters can be combined with ES6 default parameters:

function createElement({
  tag = 'div',
  id = 'default-id',
  className = 'container'
} = {}) {
  const el = document.createElement(tag);
  el.id = id;
  el.className = className;
  return el;
}

const newDiv = createElement(); // Uses all defaults
const newSpan = createElement({ tag: 'span' }); // Partially overrides

Practical Use Cases

1. Configuration Object Handling: Simplifies processing of multiple options

function initSlider({
  selector = '.slider',
  speed = 300,
  autoplay = false,
  loop = true
} = {}) {
  // Initialization logic
}

2. API Response Processing: Directly destructures deeply nested data

function handleResponse({
  data: {
    user: { firstName, lastName },
    meta: { timestamp }
  }
}) {
  console.log(`${firstName} ${lastName}`, timestamp);
}

3. Event Handling: Destructures event objects

element.addEventListener('click', ({ clientX, clientY }) => {
  console.log(`Click position: ${clientX}, ${clientY}`);
});

Considerations

1. Required Parameter Validation: Destructured parameters throw errors by default if not passed; use = {} to set overall defaults

// Bad example
function badExample({ a, b }) {
  console.log(a, b);
}
badExample(); // TypeError

// Correct approach
function goodExample({ a, b } = {}) {
  console.log(a, b);
}

2. Performance Considerations: Avoid excessive use of complex destructuring in frequently called functions, as it may impact performance

3. Readability Balance: Overly nested destructuring may reduce code readability; use it judiciously

Integration with Other Features

1. Rest Parameters: Destructuring can be combined with rest parameters

function removeProperties({ name, ...rest }) {
  return rest;
}
const obj = { name: 'test', a: 1, b: 2 };
removeProperties(obj); // { a: 1, b: 2 }

2. Arrow Functions: Also applicable in arrow functions

const getFullName = ({ firstName, lastName }) => `${firstName} ${lastName}`;

3. Type Checking: In TypeScript, can be combined with interface definitions for destructuring shapes

interface User {
  name: string;
  age: number;
}

function greetUser({ name, age }: User) {
  console.log(`Hello ${name}, you are ${age}`);
}