Is there a good JS shorthand reference out there?

Question

I'd like to incorporate whatever shorthand techniques there are in my regular coding habits and also be able to read them when I seem them in compacted code.

Anybody know of a reference page or documentation that outlines techniques?

Edit: I had previously mentioned minifiers and it is now clear to me that minifying and efficient JS-typing techniques are two almost-totally-separate concepts.

Answer 1

Two most common conditional shorthands are:

a = a || b     // if a is falsy use b as default
a || (a = b)   // another version of assigning a default value
a = b ? c : d  // if b then c else d

Object literal notation for creating Objects and Arrays:

obj = {
   prop1: 5,
   prop2: function () { ... },
   ...
};
arr = [1, 2, 3, "four", ...];

a = {}     // instead of new Object()
b = []     // instead of new Array()
c = /.../  // instead of new RegExp()

I think there is no way to shorten function as it's a keyword in the language.

// Increment/Decrement/Multiply/Divide
a += 5  // same as: a = a + 5
a++     // same as: a = a + 1

// Number and Date
a = 15e4        // 150000
a = ~~b         // Math.floor(b) if b is always positive
a = +new Date   // new Date().getTime()

// toString, toNumber, toBoolean
a = +"5"        // a will be the number five (toNumber)
a = "" + 5 + 6  // 56 (toString)
a = !!"exists"  // true (toBoolean)

Answer 2

If by JavaScript you also include versions newer than version 1.5, then you could also see the following:

---

Expression closures:

JavaScript 1.7 and older:

var square = function(x) { return x * x; }

JavaScript 1.8 added a shorthand Lambda notation for writing simple functions with expression closures:

var square = function(x) x * x;

---

reduce() method:

JavaScript 1.8 also introduces the reduce() method to Arrays:

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });  
// total == 6 

---

Destructuring assignment:

In JavaScript 1.7, you can use the destructuring assignment, for example, to swap values avoiding temporary variables:

var a = 1;  
var b = 3;  

[a, b] = [b, a]; 

---

Array Comprehensions and the filter() method:

Array Comprehensions were introduced in JavaScript 1.7 which can reduce the following code:

var numbers = [1, 2, 3, 21, 22, 30];  
var evens = [];

for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evens.push(numbers[i]);
  }
}

To something like this:

var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for each(i in numbers) if (i % 2 === 0)];

Or using the filter() method in Arrays which was introduced in JavaScript 1.6:

var numbers = [1, 2, 3, 21, 22, 30];
var evens = numbers.filter(function(i) { return i % 2 === 0; });  

Answer 3

You're looking for idioms of the JavaScript language.

• A concise but uncomprehensive list: http://ajaxian.com/archives/javascript-idioms-you-need-to-know
• Douglas Crockford's advice: http://javascript.crockford.com/style2.html

It's certainly interesting to peek at what's new in JavaScript 1.6+ but you're not going to be able to use the language features (e.g., list comprehensions or the yield keyword) in the wild due to lack of mainstream support. It is worthwhile to learn about new standard library functions if you haven't had exposure to Lisp or Scheme, however. Many typical pieces of functional programming such as map, reduce, and filter are good to know and often show up in JavaScript libraries like jQuery; another useful function is bind (proxy in jQuery, to an extent), which is helpful when specifying methods as callbacks.