Here is a handy coding tip to keep in mind when dealing with functions that can accept a large number of optional arguments. 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("<p><strong>Name:</strong> " + arguments[0] + "<br />");
document.write("<strong>Team:</strong> " + arguments[1] + "<br />");
if (typeof arguments[2] === "string") {
document.write("<strong>Position:</strong> " + position + "<br />");
}
if (typeof arguments[3] === "number") {
document.write("<strong>Batting Average:</strong> " + average + "<br />");
}
if (typeof arguments[4] === "number") {
document.write("<strong>Home Runs:</strong> " + homeruns + "<br />");
}
if (typeof arguments[5] === "number") {
document.write("<strong>Runs Batted In:</strong> " + rbi + "</p>");
}
}
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("<p><strong>Name:</strong> " + args.name + "<br />");
document.write("<strong>Team:</strong> " + args.team + "<br />");
if (typeof args.position === "string") {
document.write("<strong>Position:</strong> " + args.position + "<br />");
}
if (typeof args.average === "number") {
document.write("<strong>Average:</strong> " + args.average + "<br />");
}
if (typeof args.homeruns === "number") {
document.write("<strong>Home Runs:</strong> " + args.homeruns + "<br />");
}
if (typeof args.rbi === "number") {
document.write("<strong>Runs Batted In:</strong> " + args.rbi + "</p>");
}
}
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.
Source: Six Revisions
