Category: Javascript

Recently, I’ve been seeing a lot of Javascript functions prefixed with a dollar sign ($) or simply named $. I thought, what sort of magical property does the dollar sign have in Javascript? What sort of esotericism had I uncovered?

I checked the O’Reilly Rhinoceros book, and found that the dollar sign has no special properties.

However, I have come to discover that dollar sign function has become the more-or-less de facto shortcut to document.getElementById(). Let’s face it, we all use document.getElementById() a lot. Not only does it take time to type, but it adds bytes to your code as well.

Here’s the version from prototype.js, which can return more than just a single element:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

Because it has become a common shortcut to document.getElementById(), it means that various Javascript libraries should play nicely together: if the dollar sign function in one .js file is overwritten by the same dollar sign function in another .js file, everything should still work. That also means that creating your own dollar sign function that does something different is probably not a good idea.

In case you were wondering, the underscore has no special properties either. But let’s face it, $(‘myVal’) looks more like programming than _(‘myVal’).

Update 2012
By now, the most common use of the $() function is as synonym for jQuery() in the popular jQuery Javascript framework. It returns a jQuery object (or objects), which includes much more than just a reference to the DOM element. (In jQuery, you can still access the underlying DOM element using .get().)

Likewise, the Prototype code I cited above also returns more than just a reference to a DOM element, as it returns an extended version of the element. As such, Prototype and jQuery will almost certainly not work well together in the majority of cases.