Tobie Langel

There recently has been quite a bit of talk on the subject of maintainable JavaScript. Historically, a very concise coding style was favored over a more expicit one due to the nature of client-side scripting and to the really slow speed of modems before DSL was introduced. As all code needs to be downloaded by the client before it can be executed, file size then really mattered.¹

As this is now somewhat less of an issue, some JavaScript coders have progressively started favoring expressiveness, thus producing easier to use and more maintainable code (choosing adequate variable and function names is in my opinion one of the most important step in this direction). Even though improved download times have considerably lightened the code size constraints, large javascritpt file can still lead to bandwidth issues on high traffic sites. So the subject of file size remains touchy.

So where should we stand? I firmly believe expressiveness should always be favored but that it should never lead to verbosity. So rather than covering again the subjects of maintainable and expressive JavaScript discussed to great length in the two articles mentioned above (which I urge you to read), we will concentrate on some syntax alternatives which will enable you to save kbs while being more expressive.

forget about new Array()!

The palm of cumbersome, ugly and unfriendly code surely goes to array creation. Watch this:

var colours = new Array();
colours[0] = 'blue';
colours[1] = 'green';
colours[2] = 'yellow';

it is all over the web, especially in examples targeted at JavaScript newbies. Why use four lines when the same result can be achieved in one?

var colours = new Array('blue', 'green', 'yellow');

But we can add more syntactic sugar. As this

var colours = new Array();

and this

var colours = [];

are strictly identical, further improvement can be brought by using the [] shorthand:

var colours = ['blue', 'green', 'yellow'];

Now, that is much clearer… and much shorter too!

Note that the same goes for new Object() which you can just specify like this:

var myObject = {};

stripping kbs with the var keyword

Variable assignment is also a good candidate for re-factoring. For instance, the following:

var year = 2005;
var month = 'January';
var day = 25;

can be elegantly rewritten on one line by using a little known property of the var keyword: its ability to simultaneously create and assign a value to a number of variables (note the use of commas to separate each value assignment).

var year = 2005, month = 'January', day = 25;

In case you wondered, this

var year;
var month;
var date;

is identical to

var year, month, date;

and the two can be mixed together, so this:

var year = 2005, month = "January", day;

is perfectly valid.

more kb stripping with simultaneous value assignment

On the topic of value assignment, there is another - often neglected - shorthand offered by JavaScript from which your code can benefit: the ability to assign the same value to different variables simultaneously. Thus the following

topBorder = '1px';
rightBorder = '1px';
bottomBorder = '1px';
leftBorder = '1px';

can advantageously be rewritten as:

 topBorder = rightBorder = bottomBorder = leftBorder = '1px';

Please note that for clarity’s sake, this should only be used when the values are identical by design and not by coincidence only.

always favore expressiveness!

The few examples provided above all produce shorter and more readable code. Some of the later examples could however be misused. Reducing the size of your files and eliminating verbose code is a good idea, stripping it down until you do not understand it anymore is not. So do yourself a favor, when in doubt, always favor expressiveness over file size!