RSS

Object Literals to Pass Optional Arguments

13 Jun

Instead of passing the large number of arguments in the conventional fashion, which could unnecessarily complicate the function, you can pass just one argument which ends up being a collection of arguments declared in an object literal.

Let’s look, first of all, at how we might do this in the typical manner, so we can see the contrast:

function showStatistics(name, team, position, average, homeruns, rbi) {
  document.write("

Name: " + arguments[0]);
  document.write("Team: " + arguments[1]);

  if (typeof arguments[2] === "string") {
    document.write("Position: " + position);
  }
  if (typeof arguments[3] === "number") {
    document.write("Batting Average: " + average);
  }
  if (typeof arguments[4] === "number") {
    document.write("Home Runs: " + homeruns);
  }
  if (typeof arguments[5] === "number") {
    document.write("Runs Batted In: " + rbi + "

");
  }
}
showStatistics("Mark Teixeira");
showStatistics("Mark Teixeira", "New York Yankees");
showStatistics("Mark Teixeira", "New York Yankees", "1st Base", .284, 32, 101);

The function above can take up to 6 arguments. The first two arguments are mandatory, so inside the function, we don’t check for their existence. The last 4 arguments are not mandatory, so we only display their values if they exist.

We call the function 3 different times (last 3 lines), with different numbers of arguments each time. You can see that if the number of passed arguments was in the dozens, or more, the code could look a little messy, and would be harder to maintain, or read.

Now let’s look at the same code using object literals to pass the arguments:

function showStatistics(args) {
  document.write("Name: " + args.name);
  document.write("Team: " + args.team);
  if (typeof args.position === "string") {
    document.write("Position: " + args.position);
  }
  if (typeof args.average === "number") {
    document.write("Average: " + args.average);
  }
  if (typeof args.homeruns === "number") {
    document.write("Home Runs: " + args.homeruns);
  }
  if (typeof args.rbi === "number") {
    document.write("Runs Batted In: " + args.rbi);
  }
}

showStatistics({
  name: "Mark Teixeira"
});

showStatistics({
  name: "Mark Teixeira",
  team: "New York Yankees"
});

showStatistics({
  name: "Mark Teixeira",
  team: "New York Yankees",
  position: "1st Base",
  average: .284,
  homeruns: 32,
  rbi: 101
});

Technically, this second method of passing the arguments might require a little bit more code, but with a large collection of arguments, there are a few advantages.

First, the function itself is simplified because it accepts only one argument (args), which is a collection of all the values passed from the object literal (name, team, position, etc). Plus, the actual argument values are easy to read, and can easily be understood, updated, or modified, since the correlation between the values and the argument references are more direct.

If the function required only a small number of arguments, then this method would not be necessary, and might actually have the opposite effect. So, use this technique sparingly, and only in situations where you foresee the collection of arguments being hard to maintain over time.

Advertisements
 
Leave a comment

Posted by on June 13, 2011 in JavaScript, Mixed

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: