Monday, July 29, 2013

Javascript for Java developers 1.Lack of Classes. Instantiating objects

Lack of classes. Instante objects:

I have been working mostly in Java in my 9 years development experience. On those years I have worked with many other Java developers and one of the things that many of them have in common is that they don’t like (sometimes even hate Javascript).

I admit that Javascript has never been my favorite language either, but I do admit that it is a powerful and ever more useful language to know and understand.

This quick tutorial will try to explain some of the points I think make Java developers feel that they hate Javascript.

  1. Lack of Classes. Instantiating objects
  2. Inheritance and Encapsulation
  3. Package and organizing code
  4. Functional programming and callback functions

In this first Post I will talk about point number 1.

Lack of Classes, instantiate objects

In Java everything we program exists within a class, even the simplest of programs need a class. Classes are used more than anything else as a blueprint for the instantiation of objects. The following code shows a simple class in java:

class Simple {
  private String propertyA;
  private String propertyB;

  public Simple(String a, String b){
    this.propertyA = a;
    this.propertyB = b;
  }

  public String concatenateAandB(){
    return propertyA + propertyB;
  }
}

In the previous chunck of code we have created a very simple Java class. This class has one explicit constructor a couple of properties and a public method. In order to use it we would do something like:

Simple instance = new Simple("hello ", "world");
System.out.println(instance.concatenateAandB());

That would print hello world to the console. So how would we do something as simple as that with Javascript. First of all let's remember that there is no such thing as classes in Javascript. However he previous code is easily reproducible in Javascript. I'll show the code and then explain how it works:

function Simple(a, b) {
  var propertyA = a;
  var propertyB = b;

  this.concatenateAandB = function() {
    return propertyA + propertyB;
  }
}

The way to execute this is very similar to the Java version. We create and instance and call the method:

var instance = new Simple("hello", "world");
console.log(instance.concatenateAandB());

As you can see the functionality here is very similar, the main difference is that instead of having a class and a constructor for that class, we have an isolated function that by convention starts with a capital letter when we want it to work as a constructor (there is nothing appart from the convention that stop us from doing function simple(a, b) {). Simple is a standard Javascript function. However as you can see we called it in a non-conventional way using the new keyword. You could call this function like Simple("hello", "world") as the following chunck of code shows:

Simple("hello ", "world");
console.log(window.concatenateAandB());  

In this second scenario we can see that we are not creating a new instance with new, instead we are calling the function directly as any other Javascript function. This has the effect of calling the function using the current object as the this object (in this case the window object). When using the new keyword, instead of using the current object as this, a new empty object is created and that one is used as the context in the function. Also when using new the created instance object is returned by the method call.

This is one of the most important things to know when working with objects in Javascript. The functions behave differently when called using new or when not using new. In the first case a new empty object ({}) is created and used as the this context inside the function. When the function is called without the new keyword, the current this object (the window if you are calling from the top level) that current object is used as the context inside the function and no new instance is created.

This makes Javascript a bit confusing when creating objects and not having real difference between a standard function and a constructor function. Also it is strange that constructor functions can live all on their own while in Java they are logically living inside class definitions.

In the next Post I will explore how Javascript deals with inheritance and encapsulation, and compare it to Java as I just did here.