Why You Should Pass Arguments as an Object in JavaScript

In JavaScript, when writing functions, it’s common to pass multiple arguments directly to the function. However, there’s a more efficient, readable, and flexible way to do this—pass your arguments as an object instead of using positional arguments. This small shift in how you write functions can have a huge impact on code clarity and maintainability.

Here’s why this approach works so well and why your teammates (and future you!) will thank you.

What Does It Look Like?

Positional Arguments (The "Old" Way)

function createUser(name, age, isAdmin) {
  return { name, age, isAdmin };
}

// Calling the function
const user = createUser("Alice", 25, true);

While this works, there’s one immediate issue—without looking at the function definition, it’s unclear what the boolean true represents. Is it isAdmin or something else? You’ll have to constantly refer back to the function definition.

Passing Arguments as an Object (The Better Way)

function createUser({ name, age, isAdmin }) {
  return { name, age, isAdmin };
}

// Calling the function
const user = createUser({ name: "Alice", age: 25, isAdmin: true });

What’s better here?

• The property names (like name, age, and isAdmin) make the function’s usage self-explanatory.
• Optional parameters become much easier to handle, which we’ll discuss shortly.

The order doesn’t matter anymore, so you can pass the arguments in any sequence:

const user = createUser({ isAdmin: true, name: "Alice", age: 25 });

Why Passing Arguments as an Object Is Better

1. Improves Clarity

When you pass arguments as an object, the function call becomes more self-documenting. You don’t need to dig into the function definition or write extra comments to explain what each argument means.

Compare these two calls:

createUser("Alice", 25, true);  // What does true mean?

createUser({ name: "Alice", age: 25, isAdmin: true }); // Instantly clear

The second example is easier to read and understand at a glance.

2. Order of Arguments Doesn't Matter

When passing arguments as an object, the order becomes irrelevant. This is especially helpful for functions with many parameters.

Example:

// Works the same
const user1 = createUser({ name: "Alice", age: 25, isAdmin: true });
const user2 = createUser({ isAdmin: true, name: "Alice", age: 25 });

This eliminates the risk of mixing up arguments when calling a function.

3. Optional Arguments Are a Breeze

When your function has optional parameters, object destructuring makes it much easier to handle default values. Here’s an example:

function createUser({ name, age, isAdmin = false }) {
  return { name, age, isAdmin };
}

// You can omit optional properties
const user = createUser({ name: "Alice", age: 25 }); // isAdmin defaults to false

In contrast, using positional arguments would require additional effort to specify undefined for skipped parameters.

4. Easier Refactoring

As your application grows, your functions may need additional parameters. Passing arguments as an object allows you to add new properties without affecting existing calls. This avoids breaking changes.

Example:

function createUser({ name, age, isAdmin, role = "user" }) {
  return { name, age, isAdmin, role };
}

// Existing calls still work
const user = createUser({ name: "Alice", age: 25, isAdmin: true });

With positional arguments, you’d need to update all the places where the function is called.

Additional Tips and Considerations

1. Use Default Values for Better Flexibility

When destructuring the object, you can set default values for parameters to avoid undefined errors:

function createUser({ name, age, isAdmin = false } = {}) {
  return { name, age, isAdmin };
}

// Safe even if no arguments are passed
const user = createUser();

This prevents errors like “Cannot destructure property ‘name’ of ‘undefined’.”

2. Validate Input to Avoid Unexpected Behavior

While using objects is powerful, it’s important to validate the input to ensure all required properties are present.

Example:

function createUser({ name, age, isAdmin } = {}) {
  if (!name || !age) {
    throw new Error("Name and age are required.");
  }
  return { name, age, isAdmin };
}

3. Don’t Overdo It

While this approach works great for functions with multiple parameters, don’t use it unnecessarily for simple functions with one or two arguments. For instance, this would be overkill:

// Over-engineered for a single argument
function greet({ name }) {
  return `Hello, ${name}!`;
}

// Simpler and better
function greet(name) {
  return `Hello, ${name}!`;
}

4. Combine with TypeScript for Even More Clarity

If you’re using TypeScript, you can define a type or interface for the object parameter to make your code even more robust:

interface CreateUserParams {
  name: string;
  age: number;
  isAdmin?: boolean;
}

function createUser({ name, age, isAdmin = false }: CreateUserParams) {
  return { name, age, isAdmin };
}

This provides autocomplete and compile-time checks, making the development experience even better.

Finally

Switching to passing arguments as an object in JavaScript functions is a simple yet powerful way to write cleaner, more maintainable code. Here’s a quick recap of the benefits:

• Improved readability
• Order-independent arguments
• Easier handling of optional parameters
• Safe and flexible refactoring

However, as with any practice, use it thoughtfully. For small, simple functions, sticking to regular arguments is perfectly fine. But when your functions grow in complexity, or you want to future-proof your code, passing arguments as an object is the way to go!

Try it in your next project and see the difference. Your teammates will thank you! 🙌

Support Us