95

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()".

1) Is it correct that dollar sign was not assigned, a few years back, or do I remember wrong?

2) What is the dollar sign, if not jQuery?

Mads Skjern
  • 5,648
  • 6
  • 36
  • 40

6 Answers6

146

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.

Zeta
  • 103,620
  • 13
  • 194
  • 236
  • 38
    OK that is really annoying. It just makes it confusing because it looks like jquery is there but you can't find it anywhere. I guess once you are aware that's going on it could be handy but its really just confusing and could mask bugs. – mike nelson Jul 25 '14 at 21:49
  • 1
    Not sure when it was adopted by other browsers, but I see it available also on IE11 and Edge. – isapir Sep 25 '17 at 18:18
  • so how do people know if it's jquery? say, you have imported a large library that might have incorporated a few other libs, you wanna know if the jquery is there. please help. – MartianMartian Mar 07 '18 at 13:00
  • 3
    @Martian2049 I think real jQuery would respond to `$.fn.jquery` – mb21 Apr 24 '18 at 14:13
  • As of ES 2015, dollar is used in template literals: **Template literals can contain placeholders. These are indicated by the dollar sign and curly braces `(${expression})`** (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) – Puka Feb 06 '19 at 15:47
  • 3
    @Gaspacchio That should be another answer. However, keep in mind that `$` was not used in a template literal **in this question**. – Zeta Feb 06 '19 at 18:02
  • 1
    Currently, Chrome at least seems to treat `$()` as `document.querySelectorAll()`, exactly the same as `$$()`. This is closer to how jQuery's `$()` function works. – trlkly Jan 02 '20 at 07:08
11

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.

Zeta
  • 103,620
  • 13
  • 194
  • 236
Rahul Tripathi
  • 168,305
  • 31
  • 280
  • 331
7

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

Chen-Tsu Lin
  • 22,876
  • 16
  • 53
  • 63
4

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.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
2

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.

Sergio
  • 28,539
  • 11
  • 85
  • 132
1

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.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758