Javascript: several paradigms in one

Now, coders familiar with C++’s infamous text The C++ Programming Language The C++ Programming Language by Bjarne Stroustrup1 would be familiar with his adage of C++ being a language made up of 4 different paradigms: C imperative, modular data abstraction, object-oriented C++, and template metaprogramming/generic programming. While some would say that you should stick with one of these paradigms when programming in C++, the truth is more of a mixed. I focused on object-oriented C++ with sprinkles of templates (I stay away from advanced, Boost-y templates, they are harder to get right and harder to maintain—and time is more important to me than reducing code duplication to 0.00%).

Javascript. Well, early Javascript programs I saw years back were purely procedural with sprinkles of functional paradigms. And they look ugly. For awhile, I decided to stay away from Javascript, only picking up this really cool language slightly over 2 years back. Man, this language is one heck of a language. Like C++, it’s a mixed bag of paradigms, some of which are:

  1. Procedural programming
  2. Functional programming
  3. Object-oriented programming
  4. Semi-generic programming
  5. “Hacks”-oriented programming

Procedural programming

This is probably the very basic of Javascript that most programmers use in the early days. They consist of simply procedure-based programming techniques. Programmers wrote libraries of functions and procedures that does certain manipulation and use them without much data abstraction. It is common to see code like this:

function highlightElement(element) {
  <..>
}

// ... and later ...
function onLoad() {
  <..>
  highlightElement(document.getElementById('...'));
  <..>
}

Functional paradigm

Most veteran Javascript programmers would be very familiar with the concept of closure in Javascript. Many programmers also use closure without realizing that they are using one. Closure is very useful and it is one of the best thing offered by Javascript. The essence of closure is that you can create a function/procedure anonymously in a given scope; this anonymous function (while function and procedure differs slightly, let’s just use the term function here) keeps a closure, that is the environment where it is being declared. Therefore, this function can access all variables accessible in the scope where the function is declared. Well, an example will speak more than my rumbling:

var x = 1;
function createHandler(int index) {
  var element = getTableRow(index);
  return function() {
    // This function can access
    // 'element', 'index', and 'x'.
    <..>
    return x;
  };
}

var handler = createHandler(5);

// This function call can still access 'element'
// and 'index' although we can't directly
// access them from this scope.
handler(); // This returns 1

// This is the fun part...
x = 2;
handler(); // This returns 2!!

Object-oriented Javascript

This is my favorite by far. Javascript offers a really cool “primitive” object-oriented programming. By “primitive” I meant not having visibility that marks most other OOP languages. However, it’s still cool. To create a class, we just need to write class prototypes.

Highlighter = function(highlightColor) {
  this.highlightColor_ = highlightColor;
}
Highlighter.prototype.highlightElement = function(
    el) {
  el.style.backgroundColor = this.highlightColor_;
  <..>
}
Highlighter.prototype.setColor = function(color) {
  this.highlightColor_ = color;
  <..>
}

// To create an object:
var highlighter = new Highlighter('#dedede');
highlighter.highlightElement(..);

You can perform inheritance and mixins by inheriting the prototype attribute of a class. Awesomeness. Furthermore, you can inject methods into an object without actually having a prototype for the method.

// Let's add method to highlighter object.
highlighter.getColor = function() {
  return this.highlightColor_;
}

// Now you can use getColor on highlighter object
// but not other Highlighter object.
highlighter.getColor(); // This works.
new Highlighter().getColor(); // Failed!

Semi-generic programming

Well, Javascript is dynamically-typed, so it is very generic. What I want to highlight here is that you can write your code on-the-fly and executes it right away. You can, for example, easily ask your user to type in some Javascript in a textarea and grab that as a string and run it.

Is this a good thing? Usually no! Stay away from this as much as you can. So, stay away from any form of eval! (I guess an exception would be when unsafely parsing JSON; though most modern browsers now have good JSON parser that is probably faster than using eval directly.)

“Hacks”-oriented programming

Ok, this is pushing it a little bit. But hey! You almost never be able to escape from this when you’re doing the more advanced DOM manipulation. I’m almost tempted to say that you’ve never experienced the real Javascript if you haven’t needed to perform weird and crazy hacks on it (well, unless you’re working on server-side Rhino).

Well… When it’s about programming for several web browsers, some of which as old as 6 years and quirky beyond belief2, you have to perform some hacks to make sure things work correctly across all browsers. Recently, I illustrated this by writing about min-/max-width hacks for IE.

This is one fun part of the language. While it’s frustrating sometime, you have to admit it’s fun.

So, this is Javascript. Some consider DOM manipulation as another aspect of Javascript programming. Yes, it is. But DOM manipulation generally falls in the Object-oriented programming side of Javascript (oh, and “hacks”-oriented). Isn’t Javascript cool? I’ve used it frequently in the past 2 years and I must say it’s one heck of a language.

And Javascript 1.7 is coming with many interesting new features.

Share this on:
  • Print
  • Facebook
  • Twitter
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Blogplay
  • StumbleUpon
  1. While I wouldn’t suggest this book for first-time C++ programmer with little background in OOP or C; this book is of tremendous use if you plan to master C++ standards, short of reading the standards itself—which in itself is actually a pretty interesting reading, though I’ve never managed to read more than 5-6 pages without falling asleep []
  2. http://en.wikipedia.org/wiki/Internet_Explorer_6 []

4 Responses to “Javascript: several paradigms in one”

  1. Shattered Terminal » Blog Archive » Rant #1 Says:

    [...] Shattered Terminal i don’t have a tagline yet Blog About « Javascript: several paradigms in one [...]

  2. www.engel-bedeutung.de Says:

    Hi there I like your post “Javascript: several paradigms in one” so well that I like to ask you whether I should translate into German and linking back. Greetings Engel

  3. shards Says:

    Sure thing. Keep me posted. I’ve a friend who would love to read a German version of this. :)

  4. Sweelve Says:

    now I’ll stay tuned..

Leave a Reply