A Life Elemental

One of my favorite things about Javascript is the ability to dynamically extend any object. It makes me tingle all over. A technique I’ve grown fond of is to build a pseudo-emulation of a simple C# style property (i.e., a getter and setter in one) using this dynamic extension to handle basic default values (empty string, nulls, zero). For quick, simple operations it can be very effective. Below is an example of this concept utilizing a basic object literal:

var Foo = {
	Property: function(v) {
		if(v) { this._property = v; }
		return this._property || '';
	}
};

// Default option, only consumed before the property is defined.
$('#outputArea').html("Foo.Property = '" + Foo.Property() + "'");
Foo.Property("Bar");
$('#outputArea').append("\nFoo.Property = '" + Foo.Property() + "'");

While it doesn’t exactly replicate the .NET property, it provides the simple benefit of using a single point of access for both setting and retrieving a property.

»  Test the above code out.

Output Area:

Pretty nice, eh? If you want something slightly more robust, then you can easily upgrade to a revealing module pattern following the same principles.

var Foo = function() {
	// Explicit definition allows for more flexibility, while protecting the property from outside access.
	var _property = 'emptyState';

	return {
		// Note that the this keyword is gone, as it references the returned object, not the variable in the function.
		Property: function(v) {
			if(v) { _property = v; }
			return _property;
		}
	}
};

// Default option as defined in the object.
$('#outputArea').html("Foo.Property = " + Foo.Property() + "'");
Foo.Property("I gots data!");
$('#outputArea').append("\nFoo.Property = " + Foo.Property() + "'");
$('#outputArea').append("\nFoo._property = " + Foo._property + "'");

»  Test the above code out.

Output Area:

From here you can do a lot of fancy things, like trigger events after setting values, creating dependency chains, or even a more complex validation model that can create a list of discrepancies in your object all at once, rather than ad hoc. The best part is that either method is elegant, self-contained, and not obtuse to read. I, for one, feel like the prototype is redundant and cumbersome to use unless inheritance is a prerequisite for your solution. Even then, both Microsoft Ajax and any of the jQuery Inheritance plugins offer up solutions that feel less overwhelming in use.

That’s all for this time. In future blogs I may expand upon the aforementioned validation model by wrapping your RM classes in a validation base. Til then…

Update: For inheritance, I’ve been consuming an implementation of John Resig’s Simple JavaScript inheritance and it works like a champ. I recommend this article highly if you’re interested in this topic.