JavaScript Functions Best Practices Using Options

Posted on
By Addam Driver

Writing out javaScript functions is a no brainer. I was introduced to this thing called “options” a little while back from a friend of mine at Adobe. This isn’t “new” but it’s definitely REALLY USEFUL.


We write functions like this:

function myFuncName(); // standard function
function myFuncName(name, age, city); // function with variables being passed.

One of the major issues with writing functions like this is that when you want to add or remove any variables being passed, you would have to modify the structure of the function to handle it and it can get messy over time if the function grows.

SO! with that, I’m going to show you how to create a function that will degrade gracefully and also help you set “DEFAULTS” in your javascript. Let’s do it!

First thing: Instead of writing your javaScript function like above, we are going to write it like this:

function myFuncName(options);

“options” is essentially nothing more than a javascript object. If you’ve ever worked with JSON or have seen something that looks like the code below, then you’ve seen the structure of an “option”.

var name = {“firstName”: “Addam”, “lastName”: “Driver”}

So let me give you a full representation of a function with options and we can dig in from there.

function myFuncName(options){
var options = options || {}; // setup up the options call as an object IF none are passed in
var firstName = options.firstName || “Addam”; // Addam is the default IF none is passed in
var lastName = options.lastName || “Driver”; // Driver is the default IF none is passed in

alert(firstName+” “+lastName);

myFuncName({firstName: “Walter”, lastName: “Jenkins”}); // call the function with new names

WELL ALRIGHT! The function structure above accomplishes 2 great things.

  1. You can add/change/remove paramaters as you see fit without having to change other function calls in your code.
  2. It allows you to set “Defaults” if no values are passed in.
  3. So in this example I’m passing in a first and last name and it will alert what I passed. Let’s change the call some shall we?

    myFuncName({lastName: “Jenkins”});

    Notice I didn’t pass in a first name. The alert message will say “Addam Jenkins” and not “Addam Driver”. This is a simple example on how powerful writing function structures like this can be.

    This style is very useful for those of you who write APIs or some kind of multi-purpose function. By passing in options (objects) as paramaters, you are able to update the underlying code in the function and expand on the code without having to go back and update all of the other function calls that might be using this in a specific format. Pretty Coole Eh!?


Tags: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSS Methods

HTML Goodies




The HTML Writers Guild IWA