Puppetmaster3's Blog

I write code.

Better code without anonymous functions in ECMAScript/JavaScript

Posted by puppetmaster3 on August 18, 2011

Anyone can write code, ex: there’s kids in grade school and high school writing .js/EcmaScript mostly object-disoriented. Commercial coders (ie, you get a paycheck for writing code) presumably are more productive and write better/defensive code.

By better, I’ll mean easier to maintain and test, and specifically don’t write anon functions. When you write anon functions, your stack trace might confuses you. In .js, someone called it programing where your code moves to the right (when using anon functions).
You can learn from other ecmas script implementations ( http://blog.millermedeiros.com/2010/11/why-the-html5js-community-should-respect-the-flash-community ). This blog post is that… *when an .as3 developer writes .js code, they don’t use anon functions*. Let me show you a testable example that will produce a much better trace( in the next version of node) and in general better code by avoiding anon.

var Trait1 =Base.extend({
constructor:function(){}

,wig:null
,onFrameSignal:null
,val:"some data"

,doFrame:function() {// non - anon function, a good practice.
   // console.log('hi '+this.val);
   this.wig.mesh.rotation.x += 0.01;
   this.wig.mesh.rotation.y += 0.02;
}

,initTrait:function (wig_,onFrameSignal_) {
   this.wig=wig_;
   this.doFrame();
   this.onFrameSignal=onFrameSignal_;
   this.wig.mesh.rotation.x += 0.01;
   onFrameSignal_.add(this.doFrame,this);

  this.onFrameSignal.add( function(){// anon, hard to maintain and object disoriented, so remove
     // wig_.mesh.rotation.x += 0.01;
    // wig_.mesh.rotation.y += 0.02;
    });//()
  }

});//class

It shows 2 approaches, one is easier to test and debug. You can see the commented out code, using anon function. And the way to write it better by using a named function, doFrame. You can also do so w/ a simple built in ‘prototype’ (and not use Base js ).
You can get the entire working example from github: https://github.com/puppetMaster3/Gamina-Core/tree/master/jsSrc/anonBad

What do you think, is there a way to make it better?

This approach is similar to approach used by MaxRacer (alternativaplatform.com) in .as3.

To use this in node, you need to: npm install signals – or in browser load http://millermedeiros.github.com/js-signals

Side benefit is that you get IDE’s that are context sensitive. With WebStorm for example, if you type myClassInstance”.” it tells you the functions the class has. Other basics of defensive coding include throwing Exceptions and asserting(ex asserting instance type).

I also learned an advanced approach at a node meet up, where user ‘requests’ are assigned a guid in an associative array and expected duration. If the function calls return in time, the error is aborted. If the ‘request’ times out for any reason, the error is thrown. Nice! I’ll try it with Chain of Responsibility pattern.

I plan to do more of an architecture, like state machine and mongo at gamina.org site, the only way you can track updates is if you join “gamina” google group – linked at gamina.org . It is targeting intermediate developers and above doing ECmaScript.

In summary, don’t use anon functions.

Advertisements

One Response to “Better code without anonymous functions in ECMAScript/JavaScript”

  1. I agree about not using unnamed functions. For me the main reason isn’t even the stack traces (which is a huge benefit), but because I try to give names that explain what the function does, making the code easier to read/understand.

    cheers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: