Writing bad JavaScript for fun and profit

 Save bandwidth by using Commas instead of Semicolons

Writing good JavaScript code is all about optimization. There are many different types of optimization. You can optimize for performance, size or maintainability, but if you’re extremely lazy (as you should be), you probably won’t be able to do all of them at once. That is why it’s important to understand which of the above will provide the greatest benefit to the end user. What follows is a guide on how to write code that will get the job done, while using Javascript in questionable ways, all under the guise of optimization.

The comma is an excellent way to save space when writing Javascript code. It’s almost exactly like a semi-colon, except better. The key is being able to identify when to use this handy operator. According to Mozilla, “The comma operator evaluates both of its operands (from left to right) and returns the value of the second operand.”

Consider the following code

var x=1;
var y=2;

can be re-written as

var x=1, y=2;

Yes, that is painfully obvious and you don’t need someone to explain that to you. Alright, well how about this, you dumb piece of shit; With conditions or loops, the body doesn't have to be inside a block if its only one statement. This is valid code:

 for (var i=0; i<5; ++i) foo(x);

Of course for any more than one statement, you’d have to use a block

for (var i=0; i<5; ++i) {
  foo(i);
  bar(i);
}

Or maybe not. Recall that blocks are only required for when you are executing more than one statement. Commas turn our statements into operands. Do this instead

for (var i=0; i<5; ++i) foo(i), bar(i)

Look at that, we just saved two entire characters. OPTIMIZATION people. Lets use one of those to make this more readable

for (var i=0; i<5; ++i) foo(i),
bar(i)

Much better. See how useful this operator is? Are you ready for more? Remember that the comma actually returns the value of the 2nd (or last) operand and we can use that to our advantage. If you’re reading this, I’ll assume you are familiar with arrays and indexes. Lets say we have a short algorithm like the one below. It loops through some values, finds a div on the page, makes some calculations and sets the content of the div to the result.

var a = [1,2,3,4,5];
var ids = [‘one’,’two’,’three’,’four’,’five’];

for (var x=0; x<a.length; ++x) {
  var div = document.getElementById(ids[x])
  var result = a[x];
  var y = x*2;
  y = y*result;
  div.innerHTML=y;
}

You god damn philistines, I’m trying to raise coding to an ART here. Lets use the power of comma’s to shorten this up a bit:

var a = [1,2,3,4,5];
var ids = [‘one’,’two’,’three’,’four’,’five’]; 
for (var x=0,div,y; x<a.length; x++) { 
  result = a[div=document.getElementById(ids[x]), y=x*2, x] * y;
  div.innerHTML=result;
}

If you’re having trouble following along, allow me to explain. Where there would normally just be the index of the array (a[x]), I shoved in a couple other bits of completely unrelated code (unrelated to indexing the array). The key is that all 3 will execute, but only the last operand (x) will be returned. As a bonus, we are also using the comma operator in the for-loop instantiation to save us from having to declare some variables later on. As a matter of fact, why do anything in the body of the for loop?

for (var i=0,a=[“cat”,”dog”,”pig”]; i<a.length; foo(a[i]), i++); 

And that’s how you can abuse the comma operator. Is it hard to read? Yes. Completely pointless? You bet. Potentially dangerous? Possibly. But it’s all worth it for that feeling of superiority you get when no one else can understand why your code works.