Javascript Idioms

Understanding Funny Code

What will I talk about?

• I will NOT talk about js 101 idioms:

  var name = {};
  name.spacing = function () { ... }; // Namespaces are helpful
  (function() { ... })(); // Self executing FTW!
  

• I will NOT talk about egregious abuses of syntax:

  // These all return true
  2 == [[[[[2]]]]]; // Type coercion is a hell of a feature
  2 === { valueOf: function() { return 1; } } + 1; // Fun with valueOf
  2 === (alert(1), "hi hi", "woo" + "poo", 2); // The comma operator
  

• Middle ground: strange bit of syntax people actually use
  • Abusing the Index (aka []) Operator
  • Abusing Boolean Operators
  • Abusing Unary Operators

Abusing the Index (aka []) Operator

• What is the [] operator?

  var a = [ 1, 2 ], o = { hi: 1, bye: 2 };
  a[0] === o["hi"]; // Works on both arrays and objects
  a[1] === a["1"]; // Always takes a string
  o["hi"] === o.hi; // An alternative to the . operator
  

• Real uses of []:

  var join = "join"; b = [ "1", "2", "3" ][join](); // Same as [ ... ].join();
  [ "height", "width" ].forEach(function(elem) {
      obj[elem] = function() { ... }
  });
  var a = foo[wuddiz ? "fun1" : "fun2"](); // bool ? ifTrue : ifFalse 
  

• Why abuse the [] operator?

  // Examples 2 and 3 are much smaller versus the alternative:
  if(wuddiz) { a = foo.fun1(); } else { a = foo.fun2(); } // ~15 char savings
  var a = "join"; b = ["1","2","3"][a](); // 2-char savings when minimized
  

Abusing Boolean Operators

• Relies on the falsey/truthy nature of a javascript value

  // Falsey values
  false; 0; ""; null; undefined; Number.NaN;
  // Truthy values: anything not falsey
  []; {}; "0"; etc...
  

• Truthiness in action

  !!val; // truthy/falsey to boolean (e.x. $("div").toggleClass("foo", !!val))
  if(!obj) { /* do it... */ }
  if(!obj.prop) { /* do it... */ }
  var b = (obj || {}).prop; // avoids null-pointer exception if obj is null
  var b = obj && obj.prop // Often called a guard (better alternative to the above)
  window.console && console.log("wee") // means if(window.console) { console.log("wee"); }
  

Function and Boolean Synergy

• Prevents unnecessary calculations

  var val = input || default(); // means if(test) { val = test; } else { val = default(); }
  function(val) {
      val || (val = default()); // means if(val) { val } else { val = default(); }
      ...                      // or more concisely if(!val) { val = default(); }
  }
  var val = (input < 100) && (function() {
      var fact1200 = 1;
      for(var i = 0; i < 1200; i++) { fact1200 *= i; }
      return fact1200;
  })(); // Similar to if(input < 100) { ... }
  

• Remember variables are function scoped
• Common pitfall
  • False negatives (i.e. sometimes 0, false, "", etc... are valid values)
  • Consider using foo == null or foo === undefined or arguments.length === 0

Abusing Unary Operators

• Abuses of the plus (aka +) operator

  // The unary + operator forces types into an int
  +"12" === 12;
  +new Date(); // returns the current time in milliseconds (as a int)
  +false === 0; // no actually uses this
  12 + "" === "12"; // This is NOT the unary + operator
  new Date() + "" === "Wed Feb 16 2011 17:45:23 GMT-0500 (EST)"; // returns current time
  false + "" === "false"; // Rarely used
  

• Other unary operators

  // A better? version of a.indexOf("i") === -1
  ~"wee".indexOf("i"); // same as ~(-1) === 0;
  void((function() { alert(1); return 1e8; })()); // void always returns undefined
  // Truncating numbers: 32.7 to 32
  ~~a;
  a >> 0;
  a | 0;
  

• The world of bitwiddling: using bitwise operators for fun and profit
  • Not going to talk about it (but here's a great bitwiddling reference)

Putting it All Together

• Remember your order of operations:

  Precedence	Family	Operators	Example
  A more complete table of operator precedence
  1	unary	+ - ! ~	+5; -23; !true
  2	multiplicative	* % /	3 * 2; 87 % 3
  3	add/sub	+ -	9 - 4; 5 + 2
  4	equality	== != === !==	true !== false
  5	logic-and	&&	true && false
  6	logic-or	||	true || false

• Slightly confusing examples:

  2 + 3 * 4 === 14;
  (+to || +from) + 1 || a.length;
  name = test && cache[key] || default;
  // ^ same as if(test) { name = cache[key]; } else { name = default; }
  

One last thing: dealing with crazy

• What to do if you see this:

  var method = "scroll" + name;
  return win ? ("pageXOffset" in win) ? win[ isScrollTop ? "pageYOffset" : "pageXOffset" ] :
      jQuery.support.boxModel && win.document.documentElement[ method ] ||
              win.document.body[ method ] :
      elem[ method ];
  

• Step 1: Add some space

  var method = "scroll" + name;
  return win  
      ? ("pageXOffset" in win) 
          ? win[ isScrollTop ? "pageYOffset" : "pageXOffset" ]
          : jQuery.support.boxModel && win.document.documentElement[ method ] || win.document.body[ method ]
      : elem[ method ];
  

• Step 2: Simplify

  var method = "scroll" + name;
  var offsetType = isScrollTop ? "pageYOffset" : "pageXOffset";
  return win 
      ? ("pageXOffset" in win)
          ? win[ offsetType ]
          : jQuery.support.boxModel && win.document.documentElement[ method ] || win.document.body[ method ]
      : elem[ method ];
  

• Step 3: Clean up

  var method = "scroll" + name;
  var offsetType = isScrollTop ? "pageYOffset" : "pageXOffset";
  if(win) {
      if("pageXOffset" in win) {
          return win[ offsetType ];
      } else {
          return jQuery.support.boxModel && win.document.documentElement[ method ] || win.document.body[ method ];
      }
  } else {
      return elem[ method ];
  }
  

• Step 4: Identify patterns

  var method = "scroll" + name;
  var offsetType = w ? "pageYOffset" : "pageXOffset";
  if(win) {
      if("pageXOffset" in win) {
          return win[ offsetType ];
      } else {
          if(jQuery.support.boxModel) {
              return win.document.documentElement[ method ];
          } else {
              return win.document.body[ method ];
          }
      }
  } else {
      return elem[ method ];
  }
  

• Step 5: Simplify and clean up

  var method = "scroll" + name;
  var offsetType = isScrollTop ? "pageYOffset" : "pageXOffset";
  if(win) {
      if("pageXOffset" in win) {
          return win[ offsetType ];
      } else if(jQuery.support.boxModel) {
          return win.document.documentElement[ method ];
      } else {
          return win.document.body[ method ];
      }
  } else {
      return elem[ method ];
  }
  

• Step N: Simplify and clean up

  var method = "scroll" + name;
  var offsetType = isScrollTop ? "pageYOffset" : "pageXOffset";
  if(!win) {
      return elem[ method ];
  } else if("pageXOffset" in win) {
      return win[ offsetType ];
  } else if(jQuery.support.boxModel) {
       win.document.documentElement[ method ];
  } else {
      win.document.body[ method ];
  }
  

Questions?