How to write better JavaScript code

Creating beautiful and readable JavaScript is hard. Most JavaScript code is hard to read, reuse and maintain. I want to improve this and in this guide I will share some of the tips I have learned over the past couple of years.

This guide aims to give tips on:

• how to structure code so it's easy to read and maintain
• how to write JavaScript code that's easy to reuse
• how to write code that other JavaScript programmers can read, reuse and maintain

Get the basics of JavaScript correct

You have to get the basics correct. You have to write readable code, use proper variable names and avoid influences from your 10 years experience writing PHP. JavaScript isn't Java, it isn't Scheme, it isn't Python and it isn't PHP. Write in JavaScript using JavaScript conventions and JavaScript idioms. If you don't know what these are then read and study how JavaScript experts write their code.

The web is filled with unreadable JavaScript that looks similar to this:

p.highlite = function(i) {
    var $ = this;
    $._invalid(i) || ($._invalid($.i) || ($.l[$.i][2].className = "normal"),
    $.l[$.i = i][2].className += " selected", $._callEvent("onhighlite", $.l[i][0], $.l[i][1]));
};

This may be smart, but having thousands of lines of code that's written like this is a maintenance nightmare. Don't outsmart yourself, but don't write dumb code either.

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
– Brian W. Kernighan

A good start to improve your JavaScript basics is following guide, you can on the internet find a lot of other guides:

• Code Conventions for the JavaScript Programming Language by Douglas Crockford

Consistent naming convention and white space

Have a consistent naming convention, it will make your code more readable and easier to maintain.

My convention for writing JavaScript looks like this:

• ClassNames
• functionNames or methodNames
• local_variables
• ExceptionNames

Use whitespace to improve readability, for example:

• function(arg1, arg2, arg3) and not method(arg1,arg2,arg3)
• for(var i=0; i < 5; i++) and not for(var i=0;i<5;i++)

Use a library

Using a JavaScript library will make you more productive since most libraries solve browser compatibility issues and provides lots of code for your disposal. Pick a library that fits your style and learn it well.

Some of the libraries that I recommend:

• JQuery
• Moo Tools
• AJS
• Yahoo UI library
• Google Closure

Structure your code in directories and files

Using one file for your JavaScript code is fine if you only have 30 lines of JavaScript. But avoid this if your project requires large amounts of JavaScript or if you plan to reuse your JavaScript code.

This is a big problem and a lot of good programmers make this mistake. Here are two examples:

• reddit.js: 1000+ lines of JavaScript that has no direct connection, other than being used on reddit
• Track's standard.css: 1000+ lines of CSS

If you use one file scheme then your JavaScript (and CSS) will be highly coupled, which in most cases isn't good, as high coupled code will be harder to understand, maintain and reuse.

Have a low coupling and high cohesion

This is a more advanced topic, but it is crucial to understand as it's the only way to write reusable code.

Your JavaScript and CSS should have a low coupling to other components and your site. This gives following advantages:

• A change in one component usually does not force a ripple-effect of changes in other modules.
• Assembly of components might require less effort and/or time due to the decreased inter-component dependency.
• A particular component might be easier to reuse and/or test because dependent components do not need to be included.

For more information read more about coupling on Wikipedia.

To achieve low coupling view your application as a collection of components and try to derive general components that aren't that dependable on each other. This will result in high cohesion and make it easy to reuse and maintain your site.

This is all, I hope you have found my tips useful and do share tips in the comments that you follow.