Writing Eloquent JavaScript Without CoffeeScript

CoffeeScript has been getting a lot of press and that's not a bad thing, but it's giving JavaScript a bad rap. I've heard amateur JavaScripters say things like "Finally! Nice looking JavaScript" and things like "CoffeeScript makes JavaScript understandable." I feel that's merely inaccurate due to a lack of knowledge on JavaScript. JavaScript can be pretty too and the examples on the CoffeeScript site are purposely written to be ugly to make CoffeeScript look even prettier.

For example, on the CoffeeScript site JS arrays are written on a single line:

contenders = ["Michael Phelps", "Liu Xiang", "Yao Ming", "Allyson Felix", "Shawn Johnson", "Roman Sebrle", "Guo Jingjing", "Tyson Gay", "Asafa Powell", "Usain Bolt"];

Then CoffeeScript shows it nicely put on multiple lines:

contenders = [
  "Michael Phelps"
  "Liu Xiang"
  "Yao Ming"
  "Allyson Felix"
  "Shawn Johnson"
  "Roman Sebrle"
  "Guo Jingjing"
  "Tyson Gay"
  "Asafa Powell"
  "Usain Bolt"
]

Of course JavaScript is going to look awful if you purposely make it look like shit, but here are some ways to make your JavaScript much more eloquent without CoffeeScript.

Variables

I'd say that the number one thing that makes JavaScript look ugly is when people define lots of variables such as:

var a = 'b';
var foo = 'bar';
var lorem = 'ipsum';
var hello = 42

This can be written tho and look quite sexy like this:

var a = 'b'
,   foo = 'bar'
,   lorem = 'ipsum'
,   hello = 42

You could take this even further and line up the equal signs like so:

var a     = 'b'
,   foo   = 'bar'
,   lorem = 'ipsum'
,   hello =  42

Another cool thing that newbies don't know about is the var = var || value way of setting variables. You do this to set defaults inside of a function. So, instead of:

var func = function(param,attr){
  if(!param){ param = ''; }
  if(!attr) { attr = function(){}; }
  //Code...
}

You can do:

var func = function(param,attr){
  param = param || '';
  attr  = attr  || function(){};
  //Code...
}

Conditionals

What's an app without conditionals? The only problem is I think they're one of the ugliest things, but again, there's a much cleaner way to write them. First, the normal way:

if(x == 1){
  alert(x);
}
else{
  alert('Error');
}

Yeah, pretty ugly and not very compact. You have six lines of code to do a basic "is x 1?". Now take a look at this:

x == 1 ? alert(x) : alert('Error');

You can put this on multiple lines as well in case you had more code so you dont have a single line spanning a thousand characters wide:

x == 1
? alert(x)
: alert('Error')
;

But, what if you have more than just one line of code inside of the if/else? The syntax is a bit different. Do not use semicolons inside of the ternary (what this syntax is called) operator. Use commas like this:

x == 1
? alert(x) 
:(
   alert('Error'), 
   x = 1, 
   alert('All Fixed!')
);

Strings

Strings in JavaScript are fine until you have multi-line strings and then they become sort of a pain. Hopefully, 99% of the time, you don't have massive multi-line strings in your JavaScript code and you're using JavaScript templates or something instead, but for those cases when you do want to use them instead of doing it as one line:

var str = "First line goes here\nSecond line would go here\nand now the third!"

You could use this syntax:

var str = "First line goes here \
Second line would go here \
and now the third";

The last syntax is fine, but you can clean it up a bit more like:

var str = "\
First line goes here               \
Second line would go here          \
and now the third                  \
and hell, let's throw in this line \ 
while we're at it                  \
";

You should be aware though that Google and "X-Core" JavaScript elitist will give you shit for this because while this works, it's actually not part of EMCAScript and JavaScript engines just happen to all support it. Instead, they'll suggest, you do something like this:

var str = ""                         +
"First line goes here"               +
"Second line goes here"              +
"and now the third"                  +
"and hell, let's throw in this line" +
"while we're at it"                  +
"";

Either is fine in my opinion, but I prefer more the other simply because you dont have to do quotes on each new line.