The Javascript Dollar Sign ($) Function
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’).
Wow, that is a great little chunket of data, and a great idea. I never encountered this before, but I am totally going to start using it.
Oh, I also find it interesting that wordpress doesn’t hate you when you paste code into it. What’s your secret?
You know, I copied that code directly off of the prototype.js site, and it retained the formatting when I pasted it into the editor. I checked the code, and it’s just wrapped in a <pre></pre> tag. I think a <code></code> tag should work, too.
hrm.
I wonder why it’s hating on me. perhaps its because I have some tags, including pre tags in my code, though I thought I went through before hand and changed all the < to html entities, so that shouldn’t have fired.
Any thoughts on the empty WP function in the WP class in Wordpress?
function WP() {
// Empty.
}
http://wordpress.taragana.net/nav.html?index.html
I found your posting from Google. Using the $ as a function name is a violation of the Javascript/ECMAScript specification, and should never be done. (Unless you’re the interpreter, you’re not allowed to use $.)
The spec is a PDF file, but look at section 7.6 on page 26.
And yes, the majority of web frameworks (usually developed by people who are rabid about following HTML/XHTML/CSS specifications) almost all violate the ECMAScript specification– I love hypocrisy.
@James:
That’s good to know. I looked up the info you mentioned, in case others are curious:
“The dollar sign ($) and the underscore (_) are permitted anywhere in an identifier. The dollar sign is intended for use only in mechanically generated code.” (ECMAScript Language Specification: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf)
I can settle for an underscore!
I found this code on rjobrien.com in the “print friendly” button at the bottom of the page.
Can someone explain to me what is going on here?
onclick=”$(‘.print_toggle’).toggle(‘fast’);”
@Phil:
It looks like that’s some jQuery code. $(‘.print_toggle’) should return all elements with the class print_toggle, and .toggle(‘fast’) indicates that the specified element(s) should show/hide (depending on their current state) fast (describes the animation).
The ‘fast’ argument should be superfluous, as according to the jQuery docs, toggle() doesn’t take any arguments–but I notice that the transition is animated on http://www.rjobrien.com/. Maybe someone with more experience in jQuery can answer that.
http://docs.jquery.com/Selectors/class
http://docs.jquery.com/Effects/toggle
It’s a pretty slick effect for very little code.
I would like to point out that the JS 1.1 spec (‘96) states that the ‘$’ and ‘_’ can be used in identifiers and are valid.
url: planetpdf.com/codecuts/pdfs/tutorial/jsspec.pdf
essentially making the use of $() {} a valid function identifier. Last I recalled the ECMA Script language was developed after (and based on) Javascript by Netscape and JScript from Microsoft.
isn’t the “_” meant to indicate that you shouldn’t tamper with this thing since it’s used internally?. Kind of private? ^^