So many times I have heard complaints about the flaws of JavaScript. Many people say it’s a kiddy language, it’s error prone, it’s a pain to work with and it lacks all of the good stuff that we have in strong-typed languages such as Java and .NET. But I disagree here, although JavaScript has it’s peculiarities, and is certainly completely different if you’re used to the “real” languages, as people may call them, I think JavaScript is a really powerful, beautiful and flexible language.

I think mostly this frustration comes from the fact that people try to use JavaScript as if it were a language like .NET or Java, and that doesn’t work.

JavaScript, as said, is not strongly typed, which has some disadvantages such as compiler-time type checking, speed (although the latest browsers have gotten really fast in “interpreting” JavaScript), intellisense, etc.

But on the other hand, it’s this loosely typed paradigm that gives it its flexibility. A good example of that is the for – in construct. This construct allows you to loop over an object attributes. This is not possible with regular .NET syntax (It is possible using reflection, but in JavaScript it’s actually a language feature). That means that if you combine it with some recursive programming, you can actually display a complete object-graph with a few lines of code. As an example I created a fiddle on jsFiddle.net which displays the complete DOM-tree and allows you to inspect it (much like FireBug does).  This took me about 10 minutes to write up and is a good example of how JavaScript can be very flexible. Link: Walking the DOM

Example:

On the left side you can see a basic HTML document. On the right side is a panel (a div with position: absolute) which shows you the whole DOM tree. By clicking on a node you can dig into the tree.

If you take a look at the script, you will that basically I first draw the body-object and every time an element gets clicked I draw the sub elements.

Because JavaScript allows us to easily discover attributes on objects, it makes this example very easy to build. Of course, this is not a really useful example (since FireBug does that and much more already), but I just wanted to show you that JavaScript can be quite powerful.

Another place where you can see the power of JavaScript is in its concept of a function. In other languages, a function is just a code element. In JavaScript however a function is full-fledged object. That means that you can treat it like an object: set attributes, overwrite it, inspect it, modify it, you can even call functions on your function.

For the next example I’m going to stick with the diagnostics theme that I set forth with the DOM walking example. I will modify the functions that are in my script (at runtime) and plugin a call to a logging method before I call a function. That way I can log a stack trace and use this to do diagnostics on a running application without having to set breakpoints manually. You find it here: Function Hooks

In this sample I’m using the fact that any function is just an object. I store a reference to the function and then replace it with a function that:

1. Writes the name of the function to the page into the currently active element
2. Executes the function with the passed in arguments and context
3. Closes the active element and makes the previous element active again

Again, the core of this script is just about 20 lines, but it’s essentially a live call stack view.

The examples shown here have no real value on their own. Apart from that, they will probably slow your scripts down (a lot!) and are not made with maintainability in mind. I just wanted to illustrate that JavaScript really has a lot of power and flexibility. It’s exactly this flexibility that has allowed frameworks such as jQuery, Prototype, MooTools, etc. to emerge. They all operate differently, but are able to do so because JavaScript enables them.

That being said, I do realize that there are quite some quirky behaviors in JavaScript which are not very logical. The slightly different implementation between browsers also doesn’t help with its image of sometimes being unpredictable. Luckily there are enough frameworks to solve this for you. In a later posts I will pick out some of the things that I have run into when working with JavaScript.