Future Proof Your Methods With Options Objects

Having methods that takes a lot of arguments can be a real pain. You not only need to remember which arguments to pass but also in which order to supply them. Things gets even worse when you need to add more arguments to an existing method. This article will show you a better way of doing this by using only one argument.

The problem with bloated methods

The problem with bloated methods are twofold.

  • They are hard to use since they require you to remember all arguments and the order they need to be supplied
  • They are a pain to change. Adding an argument to an existing method can require you to find every instance where it’s used and update those calls with the additional argument.

Take this method for example.

var bio = function(id, name, description) {
  // Code
}

Ok, maybe it’s not that bloated. I actually think that using up to 3 arguments is OK, but add more than that and it’s getting messy. But for the sake of explanation let’s say it’s bloated and you want to remedy that.

A word about functions and methods

I’m talking about methods here but functions and methods are essentially the same thing. The only thing that differs is that a method is a function that’s part of an object. So in this example I assumes that the function being used is part of an object, hence the name method.

Anatomy of a function

Objectify

Ok, so how do we get around this issue. The answer is simple – Use one options object instead of several arguments. It solves all of the problems listed above. Check this out:

  • you don’t have to remember in which order to supply the arguments
  • no need to supply all arguments on all calls
  • easy to provide default values
  • easy to expand the number of arguments without breaking functionality.

Ok so how’s this done then? Let’s take a look at the code for constructing the method.

var bio = function(options) {
  var id = options.id || -1,
    name = options.name || 'Empty',
    description = options.description || 'Empty';
}

The first thing you’ll notice is that instead of taking multiple arguments the method only takes one called options. But then you might be wondering what’s going on inside the function?

Inside the function is a check that make sure that the object has certain properties and saves those into local variables. If a property is missing, a default value is provided.

Calling the objectified method

Ok, so now you know how to create the method, but what about using it? Let’s look at some code.

// Creating an options object
var options = {
  id: 1,
  name: 'Luke Skywalker',
  description: 'Young talented man'
}

// Calling the method
bio(options);

In the code above an options object is first created and populated with the values that you want to pass to the method.

The options object is then used as the single argument when calling the method.

Note: The options object is created as an object literal which is a convenient way of creating objects on the fly.

Extending the object

Now, what if you need to add another argument?

No problem, just change your method to embrace the new argument.

You could do it in one of two ways.

  • By providing default values
  • By checking if the property exists and react accordingly.

The first way is how it’s implemented in the example so you just need to follow that same pattern.

The other way is sort of the same thing but a little different. Instead of providing a default value you can simply check if the property exists or not when you need to use it.

Let’s try that with a new argument: profession.

var bio = function(options) {
  var id = options.id || -1,
      name = options.name || 'Empty',
      description = options.description || 'Empty';

  if (options.profession) {
    alert(name + ' is a ' + profession);
  } else {
    // Some sort of fallback
  }
}

Now even if you call the method without supplying the profession property the code won’t break. Since we’re checking for its existence the method will handle it gracefully. This means that you don’t have to worry about breaking existing functionality.

Pro tip

You could make the call to the method more terse by creating the options object on the fly when calling the method, like this:

bio({
  id: 1,
  name: 'Luke Skywalker',
  description: 'Young talented man'
});

That’s how I usually do it, unless of course I need to use the options object for other things as well. Then it’s better to store it in a variable so you don’t have to create it all over again.

Conclusion

Passing arguments in an object instead of as individual arguments is a great way of improving your methods. It keeps your methods terse, extendable and easy to use. My recommendation is:

Whenever you find yourself with a method that requires more than 2 or 3 arguments, pass them in an options object.

Happy coding!

Note: This article has previously been published on Code Crafting Blueprints.

About the author

Gabriel Svennerberg is an UX Designer and FrontEnd Developer living in Sweden. When he's not busy designing or building applications at Meetod, he writes about UX Design and all things web on In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress. Gabriel on Google+
  • MUHAMMAD SALMAN

    Great article , yeh this is the method we use in other languages forcefully , but not in our common programming practice. Good for reminding!