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 see 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

Updated with ECMAScript 2015 (ES6) goodies. See at the bottom.

The 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 a != null      // same as: (a !== null && a !== undefined) , but `a` has to be defined 

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() 

Built in types (numbers, strings, dates, booleans)

// 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 = b**3        // b * b * b a = +new Date   // new Date().getTime() a = Date.now()  // modern, preferred shorthand   // toString, toNumber, toBoolean a = +"5"        // a will be the number five (toNumber) a = "" + 5 + 6  // "56" (toString) a = !!"exists"  // true (toBoolean) 

Variable declaration:

var a, b, c // instead of var a; var b; var c; 

String's character at index:

"some text"[1] // instead of "some text".charAt(1); 

---

ECMAScript 2015 (ES6) standard shorthands

These are relatively new additions so don't expect wide support among browsers. They may be supported by modern environments (e.g.: newer node.js) or through transpilers. The "old" versions will continue to work of course.

Arrow functions

a.map(s => s.length)                    // new a.map(function(s) { return s.length })  // old 

Rest parameters

// new  function(a, b, ...args) {   // ... use args as an array }  // old function f(a, b){   var args = Array.prototype.slice.call(arguments, f.length)   // ... use args as an array } 

Default parameter values

function f(a, opts={}) { ... }                   // new function f(a, opts) { opts = opts || {}; ... }   // old 

Destructuring

var bag = [1, 2, 3] var [a, b, c] = bag                     // new   var a = bag[0], b = bag[1], c = bag[2]  // old   

Method definition inside object literals

// new                  |        // old var obj = {             |        var obj = {     method() { ... }    |            method: function() { ... } };                      |        }; 

Computed property names inside object literals

// new                               |      // old var obj = {                          |      var obj = {      key1: 1,                         |          key1: 5       ['key' + 2]() { return 42 }      |      }; };                                   |      obj['key' + 2] = function () { return 42 }  

Bonus: new methods on built-in objects

// convert from array-like to real array Array.from(document.querySelectorAll('*'))                   // new Array.prototype.slice.call(document.querySelectorAll('*'))   // old  'crazy'.includes('az')         // new 'crazy'.indexOf('az') != -1    // old  'crazy'.startsWith('cr')       // new (there's also endsWith) 'crazy'.indexOf('az') == 0     // old  '*'.repeat(n)                  // new Array(n+1).join('*')           // old  

Bonus 2: arrow functions also make self = this capturing unnecessary

// new (notice the arrow) function Timer(){     this.state = 0;     setInterval(() => this.state++, 1000); // `this` properly refers to our timer }  // old function Timer() {     var self = this; // needed to save a reference to capture `this`     self.state = 0;     setInterval(function () { self.state++ }, 1000); // used captured value in functions } 

---

Final note about types

Be careful using implicit & hidden type casting and rounding as it can lead to less readable code and some of them aren't welcome by modern Javascript style guides. But even those more obscure ones are helpful to understand other people's code, reading minimized code.

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; });