JavaScript: Returning this or not returning this, this is the question!

You want to discuss about this article? Ping me on Twitter!

While designing Babylon.js API, I recently found that some API may required to be more fluent.

A fluent API as stated by this Wikipedia article is an implementation of an object oriented API that aims to provide for more readable code. jQuery for instance is a great example of what a fluent API allows you to do:

 $('<div></div>')
     .html("Fluent API are cool!")
     .addClass("header")
     .appendTo("body");

Fluent API lets you chain function calls by returning this object.

We can easily create a fluent API like this:

var MyClass = function(a) {
    this.a = a;
}

MyClass.prototype.foo = function(b) {
    // Do some complex work   
    this.a += Math.cos(b);
    return this;
}

As you can see, the trick is just about returning the this object (reference to current instance in this case) to allow the chain to continue.

If you are not aware of how “this” keyword is working in JavaScript, I recommend reading this great article by Mike West.

We can then chain calls:

var obj = new MyClass(5);
obj.foo(1).foo(2).foo(3);

Before trying to do the same with babylon.js, I wanted to be sure that this would not generate some performance issues.

So I did a benchmark!

var count = 10000000;

var MyClass = function(a) {
    this.a = a;
}

MyClass.prototype.foo = function(b) {
    // Do some complex work   
    this.a += Math.cos(b);
    return this;
}

MyClass.prototype.foo2 = function (b) {
    // Do some complex work   
    this.a += Math.cos(b);
}

var start = new Date().getTime();
var obj = new MyClass(5);
obj.foo(1).foo(2).foo(3);
for (var index = 0; index < count; index++) {
    obj.foo(1).foo(2).foo(3);
}
var end = new Date().getTime();

var start2 = new Date().getTime();
var obj2 = new MyClass(5);
for (var index = 0; index < count; index++) {
    obj2.foo2(1);
    obj2.foo2(2);
    obj2.foo2(3);
}
var end2 = new Date().getTime();

var div = document.getElementById("results");

div.innerHTML += obj.a + ": With return this: " + (end - start) + "ms<BR>";
div.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";

As you can see foo and foo2 do exactly the same thing. The only difference is that foo can be chained whereas foo2 cannot.

Obviously the call chain is different between:

obj.foo(1).foo(2).foo(3);

and

obj2.foo2(1);
obj2.foo2(2);
obj2.foo2(3);

Given this code, I ran it on Chrome, Firefox and IE to determine if I have to get concerned about performance.

And here are the results I got:

• On Chrome, regular API is 6% slower than fluent API
• On Firefox, both API are almost running at same speed (fluent API is 1% slower)
• On IE, both API are almost running at same speed (fluent API is 2% slower)

The thing is that I added an operation into the function (Math.cos) to simulate some kind of treatment done by the function.

If I remove everything and just keep the “return” statement, on all browser there is no difference (actually just one or two milliseconds for 10,000,000 tries).

So my conclusion is: It’s a go!

Fluent API is great, it produce more readable code and you can use it without any problem or performance loss!