About

My name is Rob Cherny and I'm a professional Web Developer with 16 years of experience creating Web sites and Web-based applications. This site is where I write about my work, and random other things...

Web Development

JavaScript Function Arguments: Default Values, Passing Objects, and Overloading

This isn't all that new, but there's some clarity and refinements to be made to other references on the subject. Essentially, there's many cases where you might want to have a single JavaScript function which behaves differently based on what is passed to it.

These include 1-n scaling of arguments, default values for arguments, or even custom callbacks (a variation on function overloading). This can be extended even further by passing in objects.

JavaScript Arguments 101

Starting with the obvious, what is a JavaScript function argument? It's simply a value which can be passed into a JavaScript function to allow manipulation of that value. Meaning, you can set up a JavaScript function, pass a value to it and it will return a different thing or perform an operation based on that passed information.

Example:

Here you've got a function where you always start with a base of 1, and need to add two values to it every time. You can yield a different amount by passing in two different values each time.

Obviously, that's the most basic example which most all people know.

JavaScript Arguments and the Length Property

The oldest example floating around in texts and the Internets is the "arguments" object which is an array-like object which is respresentative of the arguments passed into a JavaScript Function.

Example:

There's an obvious problem with this because how do you know or count on how many items are passed in?

The "undefined" problem we can deal with later. However to start to deal with this, this special "arguments" object is not an array, but it does have a "length" property which is easy to exploit.

So, you can then get sort of complicated if you want to. Say you set up your function so that every other item was a value with a different meaning? Evens and odds? Or the even the first value was a constant and every other argument meant something else?

Example:

Here we've changed our myAdding() function to start with a message about what we're adding, set each time, and then we're looping through the remaining arguments to add them all together. Obviously not the strongest example but it illustrates the point.

More information on the arguments object can be found at this JavaScript reference.

JavaScript Default Argument Values or Optional Arguments with typeof

In many other programming languages, and indeed in the proposed JavaScript 2.0, you can define a default value for a function argument if it is not provided.

More and more online there's been other examples of this floating around, but some are more effective than others. A common one floated has been a simple or ("||") statement against the argument in question.

Here we have an example of effectively setting a default value for a function argument using 'my argument' as the value.

But what about these scenarios:

That's not quite literally what was passed, was it? This shows the "or" ("||") test is not correct in every case. What's better?

Nothing's perfect but you can test using the "typeof" operator to see if something being passed is not defined, or "undefined".

Example:

Here we have the browser returning all the actual values passed in and also getting the default value as desired. This shows the 'undefined' test is the valid test for an optional or missing argument.

Passing JavaScript Objects as Arguments

One new technique you're seeing more and more these days involves the passage of a JavaScript object structure into a function as an argument.

I'm a big fan of this technique for several reasons:

• provides notes in a self-documenting way what what each argument is
• allows for flexibility in what order they are in
• also provides flexibility on optional arguments
• allows passing of objects in any valid JavaScript object syntax

I like to use the Object Literal syntax. Basically it works like this:

Now, you can extend that by adding in optional arguments:

So there's some significant power in that, and it can be quite legible as well because you know what each parameter passed in is.

Function Overloading or Custom Callbacks

Some languages such as C# allow you to define multiple functions which do different things based upon the number or type of arguments passed to them. Based upon what is passed to the function, it will call the correct function and behave differently. You can already do something similar with optional arguments as has been demonstrated. You can also expand on this by passing into a function to a custom function. This is very useful when you want your code to be extensible and portable.

In the first example, we've passed in a function which adds 10 to the values added from the passed object o. In the second example, we've passed in a function which multiplies by 10. In the last example, we do nothing, and using a default value setting in the function we've simply returned the original calculation of 1+4.

Conclusion

In this article we've covered many different and extensible ways of working with functions and function arguments. These sorts of techniques can make your code much more flexible project to project, as well as help reduce recoding multiple functions when you need to do the same things with subtle and small differences.

We looked at:

• function argument object and length property
• setting default and optional values for function arguments
• passing objects into functions as arguments
• creating custom callbacks or a form of function overloading

Jan 7, 06:39 PM in Web Development (filed under JavaScript)

1. mahesh    Aug 10, 04:34 PM    #

   Amazing article

2. Santi    Sep 2, 03:22 PM    #

   Great article, very well explained and written, thanks!

Commenting is closed for this article.