Hoisting With JavaScript

I am really enjoying Test-Driven Development by Christian Johansen

I picked up this little gem this morning as I was learning about functions and the various objects associated with them:

You CANNOT use function declarations in conditionals. Take this example:

if (String.prototype.trim) {
  function trim(str) {
    return str.trim();
  }
else {
  function trim(str){
    return str.replace(/^\s+|\s+$/g, "");
  }
}

What is wrong with that, you might ask? HOISTING! Both functions are hoisted up to the global variable before execution, which means that the second one always overwrites the first one.

This is a better method:

if(!String.prototype.trim) {
  String.prototype.trim = function trim() {
    return this.replace(/^\s+|\s+$/g, "")
  }
}

This way, we are not overwriting any browser-available Trim methods, we are declaring the method on the String.prototype, which means it is available to ALL strings in scope, AND we have named it so that it will be more visible in a stack trace in case something goes wrong.

AWESOME