Object Observation Without Objection

I remember the first time I looked at C++, having been a C programmer for some time. There was a lot of stuff in there that seemed more complicated than it was worth (e.g. Templates) but some features were really handy. One of my favorites was function overloading, meaning, for example, that you could have a function that takes an int and a function that takes a float that could be two different functions but with the same name, differentiated by the types they expect. It makes naming a lot easier and it’s generally pretty intuitive (at least to me). What I’ve always wanted was C with just that feature, but without all the other C++ stuff.

OK, so I never got that for Christmas, but I had a similar sensation when I first looked into the Angular framework. It was really cool, I could see how it could make life a lot easier, especially that whole data-binding thing. I really liked that, but I didn't necessarily want to commit to the entire Angular framework, which can get quite involved.

Data binding is one of those fancy CS terms that in this case means you take two things, say a JavaScript variable x and an HTML dom element e, and make sure that they are always in sync. Suppose the Dom Element is just something that says “There are 3 lights”, where 3 is the value stored in x. It’s easy to set it up at the beginning that way, but what you want is that every time x changes, say to 4, that the dom element is updated so it says “There are 4 lights”. Angular is great for this kind of thing, where you set up a binding between your html and it just magically works. But what if you just want that, but not all the other stuff? Enter Object.observe().

Though not available in every browser (it's experimental, but likely to be in ES7; Chrome worked for me), Object.observe() is a really handy way to do something that used to be hard. It provides you with a way to track any changes to a given object. For example, you can have an object called lights with a field howMany and then call Object.observe with lights as the object to observe and give it a function that says what you want to do when lights changes. Essentially something like this:

    var el = some dom element with text in it;

    var lights = {howmany: 3};

    function onChangeLights() {
        // Update dom element
        el.innerHTML = “There are “+lights.howmany+” lights”;
    }

    Object.observe(lights, onChangeLights);

Now every time the object lights changes, the sentence associated with el will change to reflect the new value of lights. OK it’s not quite as slick as Angular, but if that’s all you need, it might be the best solution, rather than buying into an entire framework. I've put an example up on jsfiddle so you can try it out.

Now, in practice, you’d want something a little more flexible, and Object.observe does provide a bit more than what you see here. The function can take a parameter which is an object describing the changes made to the object, so you could make things a little more general. It’ll tell you if you’re changing a field (as above) or adding a field to the object and such like.

Object.observe() enables lots of interesting possibilities. If you want to investigate further, check out these links:

For more complete information about compiler optimizations, see our Optimization Notice.