Saturday, January 30, 2010

JavaScript Pseudo Operator Hacks

Arrow operator, count down: -->

This hack is useful when iterating over an Array, albeit in reverse.

var foo = ["a", "b", "c", "d", "e"];
var i = foo.length;
while (i --> 0) {
    console.log(foo[i]);
}

Output: e d c b a

Spoiler: The arrow is a composite of -- and > operators. The i variable is post-decremented and then compared to 0 at each iteration.

Venus operator, convert to Number: +()

Exploit the duck typing nature of JavaScript to convert any literal string to a Number object. Enclose the value in the Venus operator's parentheses.

Example:

var foo = +("50"); // 50
var foo = +("050"); // 50
var foo = +("-50"); // -50
var foo = +("+50"); // 50
var foo = +("0x50"); // 80
var foo = +("0.50"); // 0.5
var foo = +("lol"); // NaN
var foo = +(50); // 50

Spoiler: The unary + and * operators in JavaScript convert to Number objects. The parentheses are optional and just add code bling. Conversion is done as base10 or base16. This is different from parseInt which also accepts implicit base8 for strings starting with "0". Hence parseInt("050") !== +("050") so be careful with octal values.

Note: This operator is similar to the Venus operator in Perl.

Truthiness operator, convert to Boolean: !!

This is another dynamic typing trick. Prepend !! to parse a value as Boolean true or false.

Examples:

var foo = !!"bar"; // true
var foo = !!"true"; // true
var foo = !!1; // true
var foo = !!0; // false
var foo = !!""; // false

But beware:

var foo = !!"false"; // true
var foo = !!"0"; // true

All String objects are converted to Boolean based on their length. Zero length strings are false while any other length is considered true, regardless of the string contents.

Spoiler: The two exclamation points are logical NOT operators. The right exclamation first converts the value to Boolean and inverts it. The left exclamation then inverts the Boolean again to produce the Boolean equivalent of the original value.

Scribe operator, convert to String: ''+

The Scribe is a simple hack to typecast any value to a String object. Useful when strict data types are required.

var foo = ''+ 123; // "123"
var foo = ''+ 0xDEADBEEF; // "3735928559"
var foo = ''+ new Date(); // "Sat Jan 30 2010 02:30:00 GMT+0100"

Spoiler: JavaScript evaluates the expression from left to right as an empty string and then adds the value by converting it to a String object by calling its toString method.

Match Maker operator, assign default arguments: ||

This is more of a code pattern than a pseudo operator but still a useful trick. It is often used in constructors when declaring the members of a class.

var MyFoo = function (prop) {
    this.bar = prop || "1337 h4x0r";
    this.toString = function () {return this.bar};
}
alert(new MyFoo()); // "1337 h4x0r"
alert(new MyFoo("js rocks")); // "js rocks"

Spoiler: The logical OR operator evaluates from left to right and short circuits. As soon as one operand evaluates to true it will return its value (the actual value, not the Boolean true). If the left hand operand evaluates as false then the value of the right hand operand will be assigned. Sounds complex but it's a really neat trick to make object declarations more readable.

No comments: