JavaScript Tricks And Good Programming Style

URL：http://alexander.kirk.at/2006/08/09/javascript-tricks-and-good-programming-style/

I have been programming for about 10 years now, and I am always longing for improving my code. Throughout time I added a few habbits that I consider to be good practices and increase the quality of my code.

If you like it, digg it.

In a loose series I’d like to point out a few of them. As I am currently mostly programming in JavaScript, I will write most of my samples in that language; also some of the tricks I mention only apply to JavaScript. But most of them apply to most programming languages around.

Optional parameter and default value #
When defining a function in PHP you can declare optional parameters by giving them a default value (something like function myfunc($optional = “default value”) {}).

In JavaScript it works a bit differently:

var myfunc = function(optional) {
  if (typeof optional == "undefined") {
    optional = "default value";
  }
  alert(optional);
}


This is a clean method to do it. Basically I pretty much recommend the use of typeof operator. Some people would do the above with a if (!optional), but my version works cross browser (e.g. Safari will throw an error when you try to negate null).

Parameters Hints #
The larger your app gets, the more functions you get which you would use throughout the app. It also creates a problem with maintenance. As each function can contain multiple arguments it is not unlikely that you forget what those parameters were for (especially for boolean variables) or mix up their sequence (I am especially gifted for that).

So what I do is this:

var myfunc2 = function(title, enable_notify) {
  // [...]
}
myfunc2(title = "test", enable_notify = true);


This piece of code relies on the functionality of programming languages that the return value of an assignment is the assigned value. (This is something that you should also maintain in your app, for example with database storage calls, give the assignment value as a return value. It’s minimal effort and you might be glad at some point that you did it).

If you do this you can see at any point in the code, what parameters the function takes. Of course this is not always useful, but especially for functions with many parameters it gets very useful.

Also be careful that you would override the variable names in the scope of which you are calling the function. You might mini-namespace the variables, e.g. with letter+underscore (p_title, p_enable_notify).

Search JavaScript documentation #
When I need some documentation for JavaScript I use the mozilla development center (mdc). To quickly search for toLocaleString, I use Google: http://google.com/search?q=toLocaleString+mdc

As I am a German speaker I also use the excellent (though a bit out-dated) JavaScript section SelfHTML. I use the downloaded version on my own computer for even faster access.

The self variable #
This technique comes from Private Members in JavaScript by Douglas Crockford. By assigning a value in a function to this.value it will be publically accessible afterwards.

function Animal(name) {
  this.name = name;
  var self = this;
  this.hello = function() {
    alert("hello " + self.name);
    //alert("hello " + this.name); // would fail
  }
}
var dog = new Animal("Jake");
button = {
   onclick = dog.hello;
}
button.onclick();


The cause of this problem is that the this keyword receives different values in different contexts. See here for a closer explanation.

Problem with this solution is that I am not absolutely sure if this creates a memory leak in internet explorer

Reduce indentation amount #
One of the most annoying things I find in other people’s code is this: (multiple) nested if clauses. Something like this:

var arr = ["dog", "cat"];
var action = 'greet';
for(i = 0, ln = arr.length; i < ln; i++) {
  animal = arr[i];
  if (animal == "cat") {
    alert("hello " + animal);
  }
}


This is only a short example, but I often saw this going deep into 10 levels of nested clauses. I suggest using the break and continue (and next in Perl):

var arr = ["dog", "cat"];
for(i = 0, ln = arr.length; i < ln; i++) {
  animal = arr[i];
  if (animal != "cat") continue;
  alert("hello " + animal);
}


This accomplishes the same with only one level of indentation. One more example for a function:

function greet_animal(animal) {
  if (typeof animal == "undefined") return;
  if (animal != "cat") return;
  alert("hello " + animal);
}


Javascript is one of the few languages where you can leave the return value empty (i.e. typeof greet_animal() == “undefined”). You might want to rather use return false so that you can easily determine if the function failed for some reason.

That’s all for now, to be continued. Further readings on this blog:

• A better understanding of JavaScript
• Misuse of the Array Object in JavaScript

If you like it, digg it.