Introduction

When functions need multiple parameters, especially optional ones, passing a single object with destructuring is often cleaner than multiple individual arguments. This pattern improves readability, flexibility, and maintainability.

The Problem with Multiple Parameters

// ❌ Hard to read, order matters
function createUser(firstName, lastName, email, age, role, active) {
  return { firstName, lastName, email, age, role, active };
}

// What do these arguments mean?
const user = createUser('John', 'Doe', 'john@example.com', 30, 'admin', true);

The Solution: Object Destructuring

// ✅ Clear and self-documenting
function createUser({ firstName, lastName, email, age, role, active }) {
  return { firstName, lastName, email, age, role, active };
}

// Usage - order doesn't matter
const user = createUser({
  firstName: 'John',
  lastName: 'Doe',
  email: 'john@example.com',
  age: 30,
  role: 'admin',
  active: true,
});

Benefits

Order Doesn't Matter

// All equivalent - order is irrelevant
createUser({ firstName: 'John', email: 'john@example.com' });
createUser({ email: 'john@example.com', firstName: 'John' });

Easy to Add Optional Parameters

function createUser({
  firstName,
  lastName,
  email,
  age,
  role = 'user', // Default value
  active = true, // Default value
  permissions = [], // Default value
}) {
  return { firstName, lastName, email, age, role, active, permissions };
}

Clearer API

// ✅ Self-documenting
fetchData('/api/users', {
  method: 'GET',
  includeCredentials: true,
  cache: false,
  timeout: 5000,
});

Real-World Examples

API Request Builder

function apiRequest(
  url,
  { method = 'GET', headers = {}, body = null, timeout = 30000 } = {},
) {
  return { url, method, headers, body, timeout };
}

Configuration Object

function initializeApp(config = {}) {
  const {
    apiUrl = 'https://api.example.com',
    debug = false,
    logging = true,
  } = config;

  return { apiUrl, debug, logging };
}

Best Practices

Provide Defaults for Optional Params

function fetch({ url, method = 'GET', timeout = 30000 }) {
  // ...
}

Document Required vs Optional

/**
 * Create a new user
 * @param {Object} params
 * @param {string} params.firstName - Required
 * @param {string} params.lastName - Required
 * @param {string} params.email - Required
 * @param {number} [params.age] - Optional
 */
function createUser({ firstName, lastName, email, age }) {
  // ...
}

When to Use

✅ Good use cases:

Functions with 3+ parameters
Functions with optional parameters
Configuration objects

❌ Avoid when:

Function has 1-2 simple parameters
Parameter order is meaningful and clear

Conclusion

Object destructuring for function parameters creates cleaner, more maintainable APIs. Embrace this pattern to write more readable JavaScript code.

It’s like having multiple arguments without actually having to pass in multiple arguments.

It’s a lot more flexible as the order of properties in an object doesn’t matter as with multiple parameters, but we still can access each property individually as variables.

javascript #destructuring #clean-code

Destructuring Object Parameters in Functions