Coding standards for JS files

General considerations

All functions must be terminated with a semicolon (;) as well as a closing brace.

WRONG:

Drupal.behaviors.tableSelect = function (context) {
  $('form table[th.select-all]:not(.tableSelect-processed)', context).each(Drupal.tableSelect);
}

CORRECT:

Drupal.behaviors.tableSelect = function (context) {
  $('form table[th.select-all]:not(.tableSelect-processed)', context).each(Drupal.tableSelect);
};

Proposals

Start variable names that contain a jQuery object with dollar sign. Example:

WRONG:

element = $('#some-id');
$element = document.getElementById('some-id');

CORRECT:

$element = $('#some-id');
element = document.getElementById('some-id');

Thanks for that. A few

jp.stacey - September 3, 2007 - 12:21

Thanks for that. A few thoughts:

  1. Do the other PHP-like coding standards apply to Javascript? If so, should this article cross-reference to:
  2. Should we have some guidelines on encapsulation for any submitted code, to prevent the main namespace being polluted? Hem hem I wrote a basic framework a while ago; it's nothing special (and is a wheel everyone invents) but might be worth putting a version of that here.
  3. Mention jQuery(document).ready() for the same reasons of playing nicely with other code?
  4. Not sure about the dollar-sign marker on jQuery variables. I can see the rationale, but it just seems wrong in JS. It also seems perilously close to having variables called str_foo or int_bar, or even (shudder) ulonglong_quux.

Incorrect convention

Adam_Bergmark - December 1, 2007 - 15:22

The convention for terminating functions with a semi-colon is incorrect. A semi-colon is only placed after the end of an expression. A function is not considered an expression when written without code on its lefthand side, whereas the code example given above correctly has a semi-colon.

Therefore, function () {} alert("foo"); or function foo() {} alert("bar"); are both correct and don't need a semi colon. No errors will occur if code is placed on the right hand side (on the same line) in this case.

no error with function bar(){} alert("foo") but...

KhoiNqq - December 25, 2007 - 07:47

Yes, There is no error if your code is:

function foo(){} alert("bar");

but it will raise an error Expected ";" with the following code:
foo = function(){} alert("bar");

The one in the convention.

Yes, that's exactly what I

Adam_Bergmark - February 6, 2008 - 12:47

I'm afraid you misunderstood what I wrote. Your latter example is considered an expression since it's preceeded by foo = , therefore it needs a semi colon. But, setting the convention that even function foo() {} alert("bar"); needs an additional semi-colon makes no sense. It's like saying that if (foo) {} should also be suffixed by such. Sure, you could, but why? An arbitrary convention is not sane just because it doesn't cause a parse error.

The interpretation of function foo(){}; would be "A declaration of the function foo, followed by an empty statement" since there already is an implicit end-of-statement after function declarations that aren't expressions.

 
 

Drupal is a registered trademark of Dries Buytaert.