Code Crafting Blueprints

Code Crafting Blueprints

Hard-earned webdev knowledge at your fingertips

Future Proof Your Methods With Options Objects

| Comments

Having methods that takes a lot of arguments can be a real pain. You Not only needs 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

Let’s first take a look at the problems with bloated methods which 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 for example this method.

Bloated method
1
2
3
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 more than that starts to get 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

Ojbectify

A better way of passing arguments to this methods is by using an options object. It solves all of the problems listed above:

  • 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.

Passing options object as an argument
1
2
3
4
5
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.

Calling an objectified method
1
2
3
4
5
6
7
8
9
// 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.

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.

1
2
3
4
5
6
7
8
9
10
11
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 suppling the profession property the code won’t break. Since we’re checking for the existence of it, 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:

1
2
3
4
5
bio({
  id: 1,
  name: 'Luke Skywalker',
  description: 'Young man 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!

Comments