Josh On Design

Javascript has always had properties but recently support for property accessors and mutators was added, or rather it is finally supported in enough browsers that we can reliably use it. Property accessors and mutators are what we would call in the Java world "getters and setters". The cool thing about the new JavaScript version is that you don't call the getX method. Rather you can set a property the way you always have, as a variable assignment, but the accessor method is called underneath.

This is a very powerful feature, and yet my research indicates that they are rarely used in practice. In fact I can find almost no reference to them beyond how the syntax works. Where are the cool crazy things you can do with them? They seem incredibly useful.

Here's how the syntax works

var foo = { 
    x:0, 
    get value() { return this._x; }, 
    set value(x) { console.log("set to " + x); this.x = x; }
}
var foo = new Foo();
foo.x = 5; // prints 'setting x to 5'

The ability to invoke a method whenever a property is set seems very powerful. For example, you could bind the width of a rectangle to the value of a slider. Whenever the slider changes the rectangle would move, no extra update code required. I think the new property system would also let us have proxy methods, meaning we replace a setter or getter with a new implementation that does something special then calls the old implementation.

Then we could add after an object is created:

• A listener to be called when a property changes.
• A filter on a property to veto certain value changes. ex: restrict value to 0->1. veto anything else.
• Bind any two variables together. If x changes then y is updated to reflect the new value
• Bind the value of a slider to an object on screen, modified with an equation. ex: rect.width = slider.value * 3;

The new property syntax can also be used to create synthetic properties. A synthetic property is one that has no direct underlying storage. Rather the value is calculated on the fly, or delegated to alternate storage. For example, you could have a rectangle object with x and y as true properties. Then add a position property which is a short hand that maps to the x and y underneath:

rect.x = 10;
rect.y = 20;
// pos is a synthetic property. really sets x and y underneath
rect.pos = [10,20]; // pos is a synthetic property, really gets value from x and y
console.log("the rect is at " + rect.pos);

This could let us create more convenient APIs for certain domains like event handling.

onDrag(mouse) { 
    //set rectangle's position to the mouse's position 
    rect.pos = mouse.pos; 
    //set rect's position to the mouse's position plus an offset 
    rect.pos = mouse.pos.plus(30,40);
}

I don't think we can do operator overloading, or else this would be possible: rect.pos = mouse.pos + [30,40];

We could also do structure swizzling like this:

color.bgra = color.rgba;

Or modify colors stored as RGB using synthetic HSV properties, like this:

color.rgba = #ff00ff00;
color.hue += 30;
color.saturation = 0.5;

So my real question is: Why is no one using this stuff? Where are the cool demos by language gurus who know far more about JavaScript than me. Am I just missing the magic website that talks about it?

Please send feedback and comments to my twitter account @joshmarinacci instead of on the blog. Thanks!