Javascript: you’re doing it wrong.

I’ve probably heard this a thouthand times already: “Javascript sucks! It has no classes, no inheritance, you have to fake all of it into the language…“.
If you’re also a web developer you either think that or thought that at some point of your learning process (I know I did), the way I see it, we all go through the following steps regarding Javascript:

  1. First, we look at it, and think “Meh, I guess I can use it and add some effects to my site..”
  2. Then when we start realizing the potential of the lenguage, we go out and try to fake concepts like classes, inheritance and whatnot into the language when creating some big application. By the time you finish your app, you probably hate the language since it “forced” you into adding all those extra needed things.
  3. And finally…we see the light: Javascript doesn’t need classes and all of those OOP concepts you love so much, it’s perfectly fine without them, and you end up loving the language.

So: What IS the deal with JavaScript?

First of all, Javascript is, as you may know by now, not a class oriented language, it is actually a prototype oriented language. This means that even though we don’t have the normal constructs we’re so used to having on our other OOP languages (such as JAVA, C++, etc) we are still able to define and reuse behavior through something called prototyping.

What is prototyping?

Prototyping is the ability to link two objects at runtime, giving the second one access to the methods and attributes of the first one (the prototype).
In javascript, every object has a property called prototype which allows them to be linked with one other object. Through this relationship, we can extend the behavior of our objects and, you guessed it, reuse code.

Lets take a look at a simple prototyping example in JS:

function parentObjectConstructor()
{ 
  this.name = "Object";
  this.one =  1;
  this.two =  2 
}

function childObjectConstructor() { 
    this.three =  3 
}
childObjectConstructor.prototype = new parentObjectConstructor();
childObjectConstructor.prototype.constructor = childObjectConstructor;

var childObject = new childObjectConstructor();
var parent = new parentObjectConstructor();

childObject.name = "Child";
console.debug(childObject.two) //Has number 2
console.debug(childObject.three) // Has number 3
console.debug(childObject.name) //Has string "Child"
console.debug(parent.name ) //Has the string "Object"

Pretty straight forward, uh?
Yes, prototyping is pretty cool, but that’s not the only cool thing Javascript has.

Lets talk about functions!

So, functions are actually pretty big in javascript, they’re something called first class, meaning that functions are objects themselves. They have attributes and methods, they can be assigned and passed as attributes to other functions. This is not something unique to javascript though, functional programming languages have this concept of higher order functions (i.e: lisp, clojure, etc).

In particular, with javascript you can do things like:

function myfunc(callback) {
   //Do some magic inside this functions
   callback(); //Call the function passed as parameter (awesome!)
}

//We call our function "myfunc" and pass another function as a callback.
myfunc(function() {
   //Do some more magic inside this function
});

//This time, we call "myfunc" again, reusing it's logic, but the callback is different...
myfunc(function() {
   //Do something completely different on this callback!
});

Another important concept related to functions is that of closures. Inside of your function definition, you can actually define other function, when you do that, a lexical closure is created, which relates the lexical scope of the outter function, including any constant, local variables and attributes values to the inner state of each of the inner function objects created.
Simply put, each inner function’s scope, includes the local variables, constants and attributes of the outter function.
This is specially fun if you return one of your inner functions, since they will still have access to the entire scope when called.

Here is an example of that same case, taken from Wikipedia:

function displayClosure() {
    var count = 0;
    return function () {
        return ++count;
    };
}
var inc = displayClosure();
inc(); // returns 1
inc(); // returns 2
inc(); // returns 3

To sum things up

Javascript is an incredibly powerfull and fun to use programming language, you just have to use it the way it was design to be used, not in the way you use JAVA (duh!).

Learn about prototyping, read about functional programming with javascript, and stop complaning about the fact that this wonderfull language doesn’t have things that it actually does not need.

Oh and don’t forget: Have fun while learning!


Fork me on GitHub
Tagged , ,