enavu webdevmania tutsvalley psdestination
visit the enavu network
4 Comments Article Title Overlay

Associative Arrays – jQuery style JavaScript Functions

When writing JavaScript applications you will come in need of something like Associative Arrays, because it allows you to pass in attributes to the function and set a default value if one wasn’t supplied.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

When writing JavaScript applications you will come in need of something like Associative Arrays, because it allows you to pass in attributes to the function and set a default value if one wasn’t supplied.

I was working on our free project management application freedcamp the other day and I wanted to make the To-Do’s application as modular as possible. If for nothing else at least to shorten the code by 40-50 lines. So i wanted to make the Edit function of a todo as modular as possible, i wanted to be able to only pass in the variables i want to change and have the rest default. If you ever used jQuery plugins you will notice they employ this exact technique. For example:

$(".element_class").plugin({"option_1":"value_1"});

In this case we are changing the default value of option 1. So here is the code to do this with pure JavaScript:

function custom(options) {
	var default_args = {
		'text'	:	"Test",
		'bool'	:	true,
		'int'	:	5
	}
	//if not value passed, change to default
	for(var index in default_args) {
		if(typeof options[index] == "undefined") options[index] = default_args[index];
	}
	alert("the text was:" + options["text"] + " and the boolean is:" + options["bool"] + "and the integer is:" + options["int"]);
}

Let’s go over the code. We are creating a function custom and passing in options. The first thing inside the function is to set the actual attributes of options by using an array like default_args. Here we have text, a boolean, and an integer being set as defaults.

The second thing we do is run through all the defaults and see if the caller of the function passed in any new options, if they did overwrite the defaults.

That’s about it, then i alerted the values in a way that if you pass in any single value you will see it change the defaults. To call this use:

custom({"bool":false});

Notice you cannot just call the function with custom(), at the very least you need to add brackets like this custom({});.

I think you will find this very useful when writing modular functions that can be used for multiple reasons, and store their own defaults!

Let me know what you think, and where you might use this!

Related posts:

  1. How To Create a jQuery Plugin
  2. Working with cookies using jQuery and JavaScript
  3. Making a Cool Spotlight Effect with jQuery
  4. Top 10 jQuery Snippets (including jquery 1.4)
  5. 10 Awesome jQuery and JavaScript Snippets

Did you absolutely LOVE this article... share it!

Comments

  • Hello,
    I’d propose some minor modifications to the code:

    function custom(options) {
    var default_args = {
    ‘text’ : “Test”,
    ‘bool’ : true,
    ‘int’ : 5
    };

    var effective_options = {};
    $.extend(true, effective_options, default_args, options);

    // use effective_options here…
    // or return effective_options;
    }

    That’d be the way to go if you don’t want to eliminiate any side-effects on the “options” parameter.

    Cheers

  • Woops, what I meant of course is that’d be the way to go if you DO WANT to eliminate any side-effects on the “options” parameter :)

  • Notice you are using jQuery’s extend function… this was a pure JavaScript tutorial :)

  • Your tutorial is very useful, thank you

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting