This will hopefully be the first of a continuing series of smaller code articles where I share techniques I (and my team) use on a daily basis. I take this stuff for granted so I think it might be beneficial to share since (a) I might be able to improve what I do by receiving feedback on techniques I use and (b) some of the things I do, while old hat to me, might be new and useful to other people in the field.

We'll see how it goes.

With that short into out of the way I wanted to start off with a bit of JavaScript that I really appreciate, namely using a JavaScript Object as the argument for a function when multiple options are possible.

//Here's what a function call looks like

document.getElementById("myObject").onclick = doSomething(
//here's the object
	{
		//I'm using 3 options here
		file: "/_assets/images/object.jpg",
		messageText: "Objects sure are swell",
		newUrl: "/object.php"
	}
);

//and here's a snippet of the function definition
function doSomething( options ) {
//here we either use the arguments supplied in the call
//or  fall back to defaults.
//notice how the order is off and how callback
//was never supplied in the function call
	options = {
		file: options.file || "",
		callback : options.callback || function(){},
		newUrl: options.newUrl || "http://www.google.com/",
		messageText: options.messageText || "You love Objects"
    };
//stuff happens
};

Why do I like this? Two things:

1. I don't need to remember the order of arguments and I don't need to supply blank arguments if I'm not using one. I can't tell you the number of times I've messed up the order of arguments and cased an error which I then had to do a couple of minutes of research to fix. I still do it with the addClass, removeClass, hasClass, toggleClass suite I use pretty much every time I write JavaScript and that's only two arguments. If I converted those to a single Object it would be grand since I know I'd remember obj (my default Object argument name) and className.

   …and forget about remembering where to put unused arguments. That's the pits.

2. It's conceptually much clearer. Organizationally it's much cleaner to me (especially the way the defaults are spelled out right at the top of the function) and the Object labels take any guesswork out of the arguments when the function is called. I know exactly what I'm doing when I call a function defined this way. Compare the Object pattern to this classic:

   "MM_swapImage('Image1','','/img/newImg.jpg',1)"

   Quick, without referring to anything else, what's going on there?

   Sure, the first is the image name and the third is the image name, but what are the other two? Off-hand I'd have no idea and that's one of the most common blocks of code on the internet. Compare that to an object version:

   swapImage( {
   	target: 'Image1',
   	swapFrame: "",
   	fileName: '/img/newImg.jpg',
   	preload : 1
   });

   That brings clarity, right? Stunning clarity for me as I never knew what that always-blank second argument was.

And there you have it, the first installment. There will be a lot of CSS and HTML in this series as well, so if they float your boat as well please keep your eyes peeled.