JavaScript: The Most Versatile Programming Language

I’ve been spending quite a bit of time programming JavaScript lately, not only using jQuery and writing simple jQuery plugins but also building some ‘classes’ to organize the larger application code. As I’ve been going I’ve been trying to learn how to really write javascript well, following best practices and using JavaScript programming patterns as much as possible. I’ve been blown away with how versatile JavaScript really is.

You can see examples of just how powerful the language is by looking at some of the popular JavaScript frameworks that are out there and just how differently they do things.

Take this extremely simple piece of jQuery code:

  $('#my-div').addClass('awesome');

Have you ever thought about how this works? The first bit, $(’#my-div’), is selecting your element from the DOM using jQuerys CSS selector engine Sizzle. What you get back is a DOM element that is wrapped by a jQuery object. You can then call any jQuery method or methods added by plugins on this object, such as the addClass method. The method then manipulates the DOM element or whatever the method is supposed to be doing (in this case adding the class ‘awesome’).

Now lets contrast this with how the same thing would work with Prototype.

  $('my-div').addClassName('awesome');

This code looks very similar to how we did things with jQuery but underneath the behaviour is very different. Again $(’my-div’) is selecting the element from the DOM but with Prototype you get back the actual DOM element, not an object wrapped by something else. All the Prototype methods have been added directly onto the objects that they are intended for (Array methods added to the Array object, DOM methods added to DOM objects etc). When you call addClassName it is being called on the DOM element itself and adding the class ‘awesome’.

I find this to be pretty amazing. The code you write is basically the same but the underlying way the framework goes about implementing the behaviour is so very different. jQuery is all about augmenting the elements and adding the behaviour you when you make the method calls. Prototype on the other hand has extended the JavaScript language and objects as soon as you load it into the page. Two very different approaches to solving the same problem.

This has just been a little peak into the different approaches you can take to solving problems with JavaScript. I highly recommend trying out a different framework than you normally use and seeing how they do things, it will open your eyes to solutions you might never have thought of before.