A quick JavaScript formatting tip

Piers Cawley

IE’s a pain. The particular pain I want to write about is its pickiness about JavaScript object literals. Consider the following JavaScript object:

{ success: function () { ... },
  failure: function () { ... },
}

If you’re used to programming in Perl or Ruby, that trailing comma’s perfectly fine, in fact leaving it there is sometimes considered good practice because it makes it easy to extend the hash, just add a new row and leave another trailing comma.

IE’s a pain. The particular pain I want to write about is its pickiness about JavaScript object literals. Consider the following JavaScript object:

{ success: function () { ... },
  failure: function () { ... },
}

If you’re used to programming in Perl or Ruby, that trailing comma’s perfectly fine, in fact leaving it there is sometimes considered good practice because it makes it easy to extend the hash, just add a new row and leave another trailing comma.

The trouble is, it’s not strictly legal to do that in JavaScript. Pretty much every implementation out there will allow it though.

Except IE.

So, I’ve taken a leaf out of Damian Conway’s Perl Best Practices and am writing my object literals as:

{ success: function () { ... }
, failure: function () { ... }
}

By sticking the comma at the beginning of the line, I’m never going to make an object that breaks IE, and adding a new line to the hash is straightforward too. Just stick the cursor in front of the }, type my leading comma, space, attribute name, and hit return when I’m finished.

I’ve also started using the same practice pretty much everywhere else that I’ve got a comma separated list of things:

var foo
  , bar
  , baz
  ;
$.each( anArray
      , function () { ... }
);

It looks weird at first, but trust me, it grows on you.

Update

In the comments, I make reference to tweaking Steve Yegge’s excellent js2-mode to handle leading comma style a little more gracefully. Since then, I’ve made it work and attached a diff to this issue on the project’s issue tracker.

10 historic comments »

This old comment system doesn’t work any more, but you can use webmentions to respond and they’ll show up here eventually.

http://www.gravatar.com/avatar.php?gravatar_id=5c3b7d74954c39aad5a42e670b913e84&size=48&url=http://pne.livejournal.com/ By Philip Newton Wed, 16 Apr 2008 07:34:16 GMT

That reminds me of a coding convention I’ve seen for Pascal, where – as in Perl – semicolon is used as a statement separator (rather than as a statement terminator, as – for example – in C).

So one place put semicolons at the beginning of each line but the first, rather than at the end of each line but the last. (The latter would have been legal in most places, but it would have introduced an empty statement.)

http://www.gravatar.com/avatar.php?gravatar_id=d41d8cd98f00b204e9800998ecf8427e&size=48&url= By rhesa Wed, 16 Apr 2008 07:43:33 GMT

Reminds me a bit of Perlish coding style (mentioned briefly on PerlMonks by brian d foy).

Maybe it’ll grow on you, but I think it’s icky.

http://www.gravatar.com/avatar.php?gravatar_id=d41d8cd98f00b204e9800998ecf8427e&size=48&url= By nicholas a. evans Wed, 16 Apr 2008 15:40:51 GMT

I’ve been using the same trick when formatting my SQL. e.g:

select
  a.foo     as a_foo
  , b.bar   as b_foo
  , c.blatz as c_foo
from
  table1 a
  inner join      table2 b on a.id   = b.a_id
  left outer join table3 c on b.c_id = c.id
where
  a.foo is not null
  and b.bacon = chunky

… using the same technique with the join operators and the boolean operators. I’ve found that it not only makes it easier to comment out a line or add a new line, but it also makes it easier (for me) to read than most other SQL formatting techniques.

It’s still mildly annoying whenever you deal with the first item in the list though: you need to make sure to remove that leading join operator (comma, etc). If I’m editing the query a lot, I’ll add a “dummy” item to the front, just to alleviate that specific pain. e.g:

where true
  and a.foo is not null
  and b.bacon = chunky

But I haven’t used this style as comprehensively as you have (“pretty much everywhere else that I’ve got a comma separated list of things”), or as the Perlish coding style… yet. :-)

http://www.gravatar.com/avatar.php?gravatar_id=0196ff65610046d2f8ba58bc4a45f144&size=48&url=http://www.bofh.org.uk/ By Piers Cawley Wed, 16 Apr 2008 16:21:48 GMT

The ‘Perlish coding style’ is definitely a misnomer and also barking mad. If you have leading punctuation on every line, then you start to lose the differences. If you keep your semicolons as statement terminators, then the presence of a , tells you that the new line is in some sense a continuation of the previous line. Same goes for things like:

clone[property]
  = YAHOO.lang.isObject(source[property])
    ? deepCopy(source[property])
    : source[property];

symbol on the first non-blank column? This line is a continuation of the previous one. Leading semicolons would break that rule.

It’s definitely weird the first few times you see it, but it doesn’t take long before code that doesn’t follow this convention starts looking odd.

Now, if I can just persuade Steve Yegge’s excellent js2-mode.el to get the indentation right first time when I’m writing JavaScript in this style…

http://www.gravatar.com/avatar.php?gravatar_id=086e5b232508e13d262ed6c98b949402&size=48&url=http://asbjor.nu/ By Asbjãrn Ulsberg Thu, 17 Apr 2008 03:35:58 GMT

I use this coding convention in SQL, because it’s possible to vertically align stuff so it looks neat, but with all other languages I think it just looks strange.

I’ve tried to write code like that in every C-inspired language I’ve ever written, but it has never grown on me and it probably never will. I just don’t like it. :-)

http://www.gravatar.com/avatar.php?gravatar_id=d41d8cd98f00b204e9800998ecf8427e&size=48&url=http://www.spket.com By Eric Suen Thu, 17 Apr 2008 09:49:55 GMT

Hi, you should try Spket IDE, Its JavaScript editor has an option “Report Unnecessary Trailing Comma”, and it has a very powerful JavaScript formatter which has an option “remove unnecessary trailing comma”…

http://www.gravatar.com/avatar.php?gravatar_id=d41d8cd98f00b204e9800998ecf8427e&size=48&url=http://blogs.pathf.com/agileajax/ By Brian Dillard Thu, 17 Apr 2008 10:58:54 GMT

This convention was a lifesaver back in the days before there were any decent IE debugging tools I used it for years when I was a JavaScript soloist. But when I started working on large teams at Fortune 500 companies, everybody else freaked out on me about it and I had to stop. Luckily, I’m back to projects where I work on my own and can follow any coding convention I wish.

http://www.gravatar.com/avatar.php?gravatar_id=0196ff65610046d2f8ba58bc4a45f144&size=48&url=http://www.bofh.org.uk/ By Piers Cawley Thu, 17 Apr 2008 11:36:23 GMT

@Eric: Thanks, but I have 20 years of Emacs; I’m unlikely to go changing now.

@Brian: Dang! So I’m not original. I’m still in the process of retraining my fingers.

http://www.gravatar.com/avatar.php?gravatar_id=df1a2e354954a986763edabffbf00e1c&size=48&url=http://blog.tkbe.org By Bjorn Fri, 09 May 2008 03:16:18 GMT

Can I just say… eeewwh! So instead of remembering a simple syntax rule, you make all your code look crappy? I’m guessing your indentation is equally ‘creative’… (thank goodness Python saves us from much random code vomit like this!)

http://www.gravatar.com/avatar.php?gravatar_id=0196ff65610046d2f8ba58bc4a45f144&size=48&url=http://www.bofh.org.uk/ By Piers Cawley Sun, 11 May 2008 01:24:39 GMT

Well, you can say it, but it does leave the rest of us to wonder what publicly insulting somebody’s taste (and de gustibus non est disputandum and all that) is supposed to contribute to a discussion.

I suppose I should be grateful that you haven’t also inferred from my post that my momma wears army boots. Or maybe you did, but were too polite to mention it.

  • 0 likes
  • 0 reposts
  • 0 replies
  • 0 mentions