JavaScript Notes & Best Practices

These are a few notes and best practices for doing client-side development with Javascript.

First and foremost, you'll almost certainly want to use a JavaScript library. Like CSS, JavaScript isn't entirely cross-browser compatible, and there are a number of things that are harder to do than they should be. A JS library eases your pain on both these fronts, while (typically) adding very little overhead. My favorite library is jQuery. YUI is also pretty good, albeit a little heavier.

You'll probably want to put all of your JS code in a namespace. See Namespacing & Aliasing Namespaces in JavaScript

Since JavaScript supports null, you should always use that instead of false to return a 'no data found' indication in a function. There is a temptation to return dataValue or false, but false should be reserved for functions that return only true or false. dataValue or null is more correct.

This is no different than any other language, but is still a mistake that is easy to make.

If you need to create a function with optional parameters and defaults for those parameters that aren't specified, see Optional Parameters and Default Arguments.

Since classes are currently so bastardized in Javascript, I generally tend to avoid them, and not program in an object oriented fashion. That also lets me avoid using the this keyword, because I'm not instantiating objects. The context of this can change fairly easily, especially if you're working with someone else's framework (e.g. YUI), and is an easy source for frustration or errors. That said, there are some cases when creating a class really is the best option for managing data. No harm in doing that, and we can look forward to a better implementation in JS 2.0.

If possible, it is a good idea to write 'unobtrusive javascript', which is separate from both the content layer (HTML/DOM) and the presentation layer (CSS). The idea (ideally) is to have absolutely none of your JavaScript code embedded in your HTML markup; you include a <script> tag (linking to your JS code) at the beginning of the document and then attach event listeners (onclick, onchange, etc.) programatically, rather than via the onclick or onchange attributes of the documents DOM elements. Wikipedia has a good summary on the topic, and Christian Heilmann has a good how-to article.

The idea behind progressive enhancement is to create a page that any browser can read, but then progressively 'enhance' the page for browsers that have more capabilities. You create a basic page with semantically correct markup, and then enhance the page with CSS and Javascript (and possibly other elements, like Flash). The CSS and JavaScript files should be externally linked, so that browsers that cannot or do not want to deal with them do not have to download them. The Javascript should use the unobtrusive Javascript principles, and ideally check for browser capabilities before taking any action. As usual, Wikipedia has a good summary.