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