Javascript vs. Java class

If you are a C++ programmer shifting to Java, you can easily migrate without a problem. But being a C++/JAVA programmer shifting to object oriented javascript its not the same.

Javascript is an interpreted language and that makes it special. Prior to Web2.0, we use javascript for validating forms and some simple front end computation. Since the use of AJAX (asynchronous javascript and xml ) it totally change you use javascript.

Id like to explain here how javascript objects differs from java/C++ objects.

Javascript object is actually just a hash table or associative array. Its a key-value pair. You can define an object directly without defining a class.

var animalObj = {};
animalObj.sound = "grrr!";

in this case, I declared an object on the fly, and assign it to {}. which means Hash. After that I created a property called sound and assign "grr!" value to it.

You can also define the object like this:

var animalObj = new Object();

I know most C++/Java developer are use to that. But technically, it makes no difference. Its just more simpler to use {}.

For the methods, I can simply implement it like this:

animalObj.playSound = function() { Alert(this.sound) }

Take note that its just like a property, but you assign a function to it. To call it though, you need a "()".

animalObj.playSound();

The "this" keyword here is similar to JAVA/C++. But take note, sometimes, it changes reference. You'll get lots of headaches on the "this" keyword if you don't understand how it changes reference. But don't worry, I will explain it here as I continue.

You can also define this object like a hash (key-value pair). aka JSON-style

var animalObj = {
   sound: "grrr!",
  playSound: function() { alert(this.sound); }
};

Its simple huh? so far so good. But unfortunately, you cannot reuse this object. Everytime you need it, you have to define it again, and I guess that's bad. But luckily, you can define it as a type. This time you have to use prototype.

Prototype is a collection of properties and methods that can be automatically attached to an object when it is created.

To make an object type (or a class in javascript) you have to define a public function to work as a constructor. Take note again, that object here is like Hash, its not like a class in C++/JAVA that has a constructor. The way to define you constructor is to make a public function return an object. Here's how:

function AnimalObj2() {
   this.sound = "grr!";
   this.playSound = function() { alert(this.sound); }
}

var myAnimal2 = new AnimalObj2();
myAnimal2.playSound();

This time I have a javascript AnimalObj2 type. Unfortunately, every time I instantiate or call the constructor function, I will create a new function in the memory, and this is not good, because each object has its own instance of the function. Which, Ideally the function should only be define once. So solve this problem, you have to put the method in the object's prototype. Because there's always 1 prototype in each object.

function AnimalObj2() {
   this.sound = "grr!";
}

AnimalObj2.prototype = {
   this.playSound = function() { alert(this.sound); }
}

Where as in JAVA, you would define it like this:

public class AnimalObj {
    private String sound = "Grrr!";

    public AnimalObj() {
    }

    public void playSound() {
        System.out.println(this.sound);
    }
}

Next post, I will discuss how to define javascript object using Prototype.js framework.