📘 JavaScript Best Practice: Use Object Parameters Instead of Long Positional Arguments

❌ DON’T DO THIS — Positional Parameters

When a function has multiple parameters, especially optional ones, positional arguments become confusing and error-prone.

Bad Example

function saveUser(name, email, phone) {
  // ...
}

// ❌ Hard to read
saveUser("John", "", "9876543210");

// ❌ What is ""? Which field did we skip?

Problems

Hard to remember argument order
Passing empty strings just to skip parameters
Code becomes unreadable and brittle
Adding new optional parameters breaks all existing calls

✅ DO THIS — Use a Single Object Parameter

Objects allow named parameters, optional values, default values, and cleaner code.

Good Example

function saveUser({ name, email, phone }) {
  // ...
}

// ✅ Much clearer
saveUser({
  name: "John",
  phone: "9876543210",
});

Benefits

No need to remember order
Optional parameters become easy
Extensible without breaking old code
Self-documenting function calls

💡 Real-World Production Examples

✔ Example 1: API Request Handler

❌ Old (positional hell)

function fetchUsers(page, limit, search, sortBy, direction) {
  // ...
}

fetchUsers(1, 20, "", "name", "asc");

✅ New (object parameters)

function fetchUsers({
  page = 1,
  limit = 20,
  search = "",
  sortBy = "name",
  direction = "asc",
}) {
  // ...
}

fetchUsers({
  search: "john",
  direction: "desc",
});

✔ Example 2: Vue/React Component Utils

❌ Anti-pattern

function openModal(title, content, showClose, size) { }
openModal("Delete?", "Are you sure?", true, "lg");

✅ Clean pattern

function openModal({
  title,
  content,
  showClose = true,
  size = "md",
}) {}

openModal({
  title: "Delete?",
  content: "Are you sure?",
  size: "lg",
});

✔ Example 3: Logging in Production

❌ Wrong

log("error", "Database failed", false, Date.now());

✅ Right

log({
  level: "error",
  message: "Database failed",
  showAlert: false,
  timestamp: Date.now(),
});

✔ Example 4: Utility Function

❌ Bad

function calculatePrice(price, discount, tax, includeGST) {}

calculatePrice(1000, 0, 5, true);

✅ Good

function calculatePrice({
  price,
  discount = 0,
  tax = 5,
  includeGST = false,
}) {}

calculatePrice({
  price: 1000,
});

💼 Production-Ready Template (Reusable)

/**
 * @description Generic best-practice function with object params.
 */
function doTask({
  required,
  optional1 = "",
  optional2 = null,
  enabled = true,
}) {
  // function logic
}

// Usage:
doTask({
  required: "value",
  enabled: false,
});

🚀 Writing cleaner, scalable JavaScript starts with small habits.