Ok, so this is nothing new nor is it something that hasn't been blogged about before.  However, I thought I'd share in case it helps some other googler that can't find what they're looking for 🙂

So in JavaScript, most functions have a pretty standard form: you name the function and then define which arguments you wish to pass to the function.  Depending on how you work out the logic in the remainder of the function, the arguments can all be required, all be optional, or whatever.

The one major drawback, however, is that the arguments must be passed in the proper order.  For example, if I have a describeMovie() function that takes an actor, title, and year argument, the order I define these arguments in will be the order in which I have to pass them in my function call.

function describeMovie(actor,title,year) {
    // alert the movie’s lead actor

would require

onclick="describeMovie('Bruce Willis','Surrogates','2009')"

in order to work properly. 

(This won’t work:)

onclick="describeMovie('Bruce Willis','2009','Surrogates')"

Also, while I can easily pass the actor and title parameters without the year parameter (describeMovie('Bruce Willis','Surrogates')), I’ll run into issues if I try to pass just the actor and year parameters (describeMovie('Bruce Willis','2009')), for the order in which they are passed will make my function think that what I want to be the "year" parameter is actually the "title". Lame.

Usually, the answer is just to pass an empty placeholder parameter in order to "skip" an unneeded parameter.  While this works, it can be a bit unreadable if you have a butt-load of empty parameters…wait, is the eighth set of '' for this or is the thirteenth…?

But honestly, the biggest problem is that the correlation of "Bruce Willis" to the parameter "actor" is only defined by order.  There’s nothing beyond this that binds the two together. 

Is there a way around this unsavory state of affairs?  Of course!

Instead of passing x number of arbitrary, unnamed arguments to the function, you can actually pass an object literal as the only argument. 

Now of course, an object literal is nothing special.  It’s just a simple collection of name-value pairs.  But here’s where the coolness of this approach is realized.  Because we’re using name-value pairs, not only are the values we’re passing “named”, but we can also use them in any arbitrary order that we want to, precisely because they’re named!

So in our example, instead of having to invoke our function like this:

describeMovie('Bruce Willis','',2009)  [remember, the empty title?]

With an object literal we can do this:

describeMovie({actor:'Bruce Willis',year:2009})

To me, the second is much cleaner and more intuitive. We're only passing what we want to, and not forcing the issue with empty, placeholder arguments.  Moreover, I feel like I have more confidence in how arguments are passed, since they are now "named" in the object literal.

On our actual function, then, it’s equally easy to deal with using the object literal, especially now that everything is wrapped in name-value pairs:

function describeMovie(obj) {
    // alert the movie’s lead actor

Super nice!