What is the dollar sign in Javascript, if not jQuery
JavascriptJqueryJavascript Problem Overview
I did some javascript / jQuery programming a few years ago, and I just started up again. Back then the dollar sign was used for all the jQuery functionality, and if no jQuery library was imported, the dollar sign was not defined.
Today, I started up Firefox, in a completely empty html file with no javascript libraries, and yet the dollar sign points to something. If I open the Firefox console and type '$' I get "function()"
.
-
Is it correct that dollar sign was not assigned, a few years back, or do I remember wrong?
-
What is the dollar sign, if not jQuery?
Javascript Solutions
Solution 1 - Javascript
> 1) Is it correct that dollar sign was not assigned, a few years back, or do I remember wrong?
That's correct and still true.
> 2) What is the dollar sign, if not jQuery?
Firefox and Chrome implement $
, $$
and several others as helper commands. Both will set $$
to document.querySelectorAll()
, and set $
to document.querySelector
if window.$
hasn't been defined.
So what you're seeing isn't actually standard JavaScript, but a helper in the developer console of your browser. It's also not jQuery (as long as you're not on a page using jQuery). However, it's behaviour is close to the one of jQuery
, concerning that querySelector
(for single matches) and querySelectorAll
(for multiple matches) give you almost the same strength as the jQuery selector.
Solution 2 - Javascript
It means nothing to the interpreter just like the underscore
From the ECMAScript specification:
> The dollar sign ($) and the underscore (_) are permitted anywhere in > an identifier. The dollar sign is intended for use only in > mechanically generated code.
You may also check JavaScript Dollar Sign ($) - What is it for?
> By convention, the dollar sign ($), the underscore (_) and even some > ASCII character are permitted to be used anywhere in a JavaScript > identifier (Source: Ecma Script documentation (7.6 Identifiers, > ECMA-262, 3rd Ed.) the dollar sign is intended for use only in > mechanically generated code. This means that we do not want to use the > dollar sign ($) in our indentifier names, unless we are writing a > framework. The following is a list of permitted characters that can be > used anywhere in an identifier name:
IdentifierName ::
IdentifierStart
IdentifierName IdentifierPart
IdentifierStart ::
UnicodeLetter
$
_
UnicodeEscapeSequence
IdentifierPart ::
IdentifierStart
UnicodeCombiningMark
UnicodeDigit
UnicodeConnectorPunctuation
UnicodeEscapeSequence
EDIT:-
Actually dollar sign function has become the more-or-less de facto shortcut to document.getElementById()
.
To confirm my point check this:
> $(selector) > > Returns a single element matching the given CSS selector. In old > Firebug versions, this used to be equivalent to > document.getElementById.
Solution 3 - Javascript
Dollar sign($)
was not assigned, but some browser add function for special usage.
Like Google Chrome, if you type $
on the console, it will return :
function $(selector, [startNode]) { [Command Line API] }
This function assigned for Google Chrome Developer Tool, and let debug more easier.
if you type $('div')
, it will return something like this:
e.fn.e.init[178]
and include every div
DOM object in it.
BTW, after you click the right button on the mouse to select element, you can acceess angular.js scope by type $scope
on the console
Solution 4 - Javascript
Note that $$
isn’t quite document.querySelectorAll
, because unlike that function it doesn’t return a NodeList
:
document.querySelectorAll("p") instanceof NodeList // true
$$("p") instanceof NodeList // false
Array.isArray($$("p")) // true
So $$(selector)
is really more like Array.from(document.querySelectorAll(selector))
. This means that array methods like map
and friends, not just forEach
, are available when using $$
which is actually quite useful.
Solution 5 - Javascript
It may be anything, as $
is a valid variable name, just like dollar
.
From ECMAScript :
Identifier ::
IdentifierName but not ReservedWord
IdentifierName ::
IdentifierStart
IdentifierName IdentifierPart
IdentifierStart ::
UnicodeLetter
$
_
\ UnicodeEscapeSequence
The simplest solution to see what it is and where it is defined would probably to type $()
and to put a breakpoint on this line.
Solution 6 - Javascript
Just to complete the other answers here, MooTools also uses $
as a alias to document.getElementById
.
It does check if the $
is taken and will then default to document.id
.