206

In the following JavaScript code there is a dollar ($) sign. What does it mean?

$(window).bind('load', function() {
    $('img.protect').protectImage();
});
Jeankowkow
  • 814
  • 13
  • 33
coderex
  • 27,225
  • 45
  • 116
  • 170

8 Answers8

316

Your snippet of code looks like it's referencing methods from one of the popular JavaScript libraries (jQuery, ProtoType, mooTools, and so on).

There's nothing mysterious about the use of $ in JavaScript. $ is simply a valid JavaScript identifier. JavaScript allows upper- and lower-case letters (in a wide variety of scripts, not just English), numbers (but not at the first character), $, _, and others.¹

Prototype, jQuery, and most javascript libraries use the $ as the primary base object (or function). Most of them also have a way to relinquish the $ so that it can be used with another library that uses it. In that case you use jQuery instead of $. In fact, $ is just a shortcut for jQuery.

¹ For the first character of an identifier, JavaScript allows "...any Unicode code point with the Unicode property “ID_Start”..." plus $ and _; details in the specification. For subsequent characters in an identifier, it allows anything with ID_Continue (which includes _) and $ (and a couple of control characters for historical compatibility).

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Nosredna
  • 83,000
  • 15
  • 95
  • 122
  • +1 It’s a valid JavaScript identifier first and often used by JavaScript frameworks as an alias second. – Gumbo Jul 19 '09 at 18:11
  • @Paolo: Often, yes. There was however no indication the OP wanted to know about this. A direct answer is also a good thing. :) Saying that, I would still agree this is a better answer. My only quibble was with the emphasis you were placing on a specific point. – Noldorin Jul 19 '09 at 18:29
  • I thought Noldorin's answer was fine. :-) I'm going to add a sentence right up front to say that this code looks like it's referencing methods from one of the popular JS libraries. – Nosredna Jul 19 '09 at 18:45
  • @Noldorin: The direct question was in the title, and the title says "what is the meaning of $ sign in javascript" - answering that question directly, it is extremely relevant that it is simply a valid identifier that happens to be used by libraries. Your answer is correct, obviously, but only taking the body into account. – Paolo Bergantino Jul 20 '09 at 03:54
  • What does this piece of code mean: $input.prop('type') == 'radio'; – OKGimmeMoney Aug 15 '14 at 18:22
  • @CanIHaveSomeChange, it means *its comparing type of (may b input field in your case) to "radio"* it will return either `true` or `false` – Ravi Dhoriya ツ Nov 21 '14 at 14:40
63

From another answer:

A little history

Remember, there is nothing inherently special about $. It is a variable name just like any other. In earlier days, people used to write code using document.getElementById. Because JavaScript is case-sensitive, it was normal to make a mistake while writing document.getElementById. Should I capital 'b' of 'by'? Should I capital 'i' of Id? You get the drift. Because functions are first-class citizens in JavaScript, you can always do this:

var $ = document.getElementById; //freedom from document.getElementById!

When Prototype library arrived, they named their function, which gets the DOM elements, as '$'. Almost all the JavaScript libraries copied this idea. Prototype also introduced a $$ function to select elements using CSS selector.

jQuery also adapted $ function but expanded to make it accept all kinds of 'selectors' to get the elements you want. Now, if you are already using Prototype in your project and wanted to include jQuery, you will be in problem as '$' could either refer to Prototype's implementation OR jQuery's implementation. That's why jQuery has the option of noConflict so that you can include jQuery in your project which uses Prototype and slowly migrate your code. I think this was a brilliant move on John's part! :)

Shaya Ulman
  • 1,299
  • 1
  • 12
  • 24
SolutionYogi
  • 31,807
  • 12
  • 70
  • 78
  • 17
    `var $ = document.getElementById;` does not work in Firefox or Google Chrome. You should use `function $(id) { return document.getElementById(id); }` instead. See http://stackoverflow.com/questions/1007340 for more information. – Grant Wagner Jul 20 '09 at 19:43
  • 1
    I didn't know that, thanks Grant. I can confirm that this used to work in IE6 as well as Firefox 2 because I frequently used this technique. I will update my main post. – SolutionYogi Jul 20 '09 at 20:29
  • 1
    Actually, it would be: `function $(sel) { return document.querySelectorAll(sel); }` – Nanoo Sep 05 '20 at 21:21
  • 1
    @Nanoo Your comment still works and is useful in many cases. If you use your method, you can even search through classes and IDs. – Andrew Mar 03 '22 at 05:23
48

That is most likely jQuery code (more precisely, JavaScript using the jQuery library).

The $ represents the jQuery Function, and is actually a shorthand alias for jQuery. (Unlike in most languages, the $ symbol is not reserved, and may be used as a variable name.) It is typically used as a selector (i.e. a function that returns a set of elements found in the DOM).

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Noldorin
  • 144,213
  • 56
  • 264
  • 302
37

As all the other answers say; it can be almost anything but is usually "JQuery".

However, in ES6 it is a string interpolation operator in a template "literal" eg. 

var s = "new" ; // you can put whatever you think appropriate here.
var s2 = `There are so many ${s} ideas these days !!` ; //back-ticks not quotes
console.log(s2) ;

result:

There are so many new ideas these days !!

OmG
  • 18,337
  • 10
  • 57
  • 90
Bob
  • 1,589
  • 17
  • 25
  • 4
    This is a useful answer! It was the one I was looking for since I knew we didn't have jQuery or any other library. It's basically a way of printing a variable inside a larger string without using quotes and plus-signs etc. – Oscar Bravo Nov 23 '17 at 14:18
20

The $() is the shorthand version of jQuery() used in the jQuery Library.

nbro
  • 15,395
  • 32
  • 113
  • 196
chchrist
  • 18,854
  • 11
  • 48
  • 82
5

In addition to the above answers, $ has no special meaning in javascript,it is free to be used in object naming. In jQuery, it is simply used as an alias for the jQuery object and jQuery() function. However, you may encounter situations where you want to use it in conjunction with another JS library that also uses $, which would result a naming conflict. There is a method in JQuery just for this reason, jQuery.noConflict().

Here is a sample from jQuery doc's:

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

Alternatively, you can also use a like this

(function ($) {
// Code in which we know exactly what the meaning of $ is
} (jQuery));

Ref:https://api.jquery.com/jquery.noconflict/

not2qubit
  • 14,531
  • 8
  • 95
  • 135
Vishnu Mallipudi
  • 370
  • 3
  • 6
3

From the jQuery documentation describing the jQuery Core Object:

Many developers prefix a $ to the name of variables that contain jQuery objects in order to help differentiate. There is nothing magic about this practice – it just helps some people keep track of what different variables contain.

OmG
  • 18,337
  • 10
  • 57
  • 90
Josh Britton
  • 31
  • 1
-1

Basic syntax is: $(selector).action()

A dollar sign to define jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s)

prem_nigewan
  • 11
  • 1