Coder Perfect

Why would a variable in JavaScript begin with a dollar sign? [duplicate]

Category: javascript

Tag: ,

Problem

Variables that begin with a dollar sign appear frequently in JavaScript. When and why would you prefix a variable in this manner?

(I’m not talking about jQuery’s $(‘p.foo’) syntax, but rather regular variables like $name and $order.)

Asked by Ken

Solution #1

The distinction of jQuery objects stored in variables from other variables is a very common use in jQuery.

For instance, here’s what I’d say:

var $email = $("#email"); // refers to the jQuery object representation of the dom object
var email_field = $("#email").get(0); // refers to the dom object itself

This is incredibly useful while developing jQuery code because it makes it easier to see jQuery objects with different properties.

Answered by jonstjohn

Solution #2

Using $-prefixed variable names was explicitly forbidden by the standard in the first, second, and third editions of ECMAScript, except in the context of autogenerated code:

This restriction was removed in the next edition (the current 5th Edition), and the above passage was replaced with

As a result, the $ symbol can now be freely used in variable names. As mentioned in earlier responses above, several frameworks and libraries have their own norms for interpreting the symbol.

Answered by cic

Solution #3

The dollar symbol is designed to be used by machine generated code, as others have stated. Some of the most popular JavaScript libraries, however, have defied this convention. This character is used in the IDs of JQuery, Prototype, and MS AJAX (AKA Atlas) (or as an entire identifier).

In a nutshell, you are free to utilize the $ whenever you wish. (The interpreter is unconcerned.) The question is, when will you utilize it?

I don’t use it myself, but I believe it has merit. I believe it is used by Microsoft AJAX to indicate that a function is an alias for a more verbose call.

For example:

var $get = function(id) { return document.getElementById(id); }

That appears to be a reasonable practice.

Answered by Benry

Solution #4

The $ prefix is exclusively used in AngularJS for identifiers in the framework’s code. It is forbidden for users of the framework to use it in their own identifiers:

Source: https://docs.angularjs.org/api

Answered by Travis Watson

Solution #5

Let me discuss some of the background and rationale for this convention, as I was the one who started it in 2006 and championed it on the early jQuery mailing list.

This is an example from the accepted answer:

var $email = $("#email"); // refers to the jQuery object representation of the dom object
var email_field = $("#email").get(0); // refers to the dom object itself

However, that does not adequately illustrate the situation. We’d still have two separate variable names here if we didn’t use the $: email and email field. That’s a lot of value right there. Why would we need to add a dollar sign to one of the names when we already have two?

Actually, I wouldn’t have used email field in this case for two reasons: names with underscores isn’t idiomatic JavaScript, and field isn’t really appropriate for a DOM element. However, I did pursue the same path.

I tried a few different things, among them something very similar to the example:

var email = $("#email"), emailElement = $("#email")[0];
// Now email is a jQuery object and emailElement is the first/only DOM element in it

(Of fact, a jQuery object can have several DOM elements, but the code I was working on had a lot of id selectors, so there was a 1:1 match in those circumstances.)

Another time, I had a method that took a DOM element as a parameter and required a jQuery object:

// email is a DOM element passed into this function
function doSomethingWithEmail( email ) {
    var emailJQ = $(email);
    // Now email is the DOM element and emailJQ is a jQuery object for it
}

That’s a little perplexing! In one of my pieces of code, email is the DOM element and emailElement is the jQuery object, whereas in the other, email is the DOM element and emailJQ is the jQuery object.

I kept mixing them together because there was no uniformity. Plus, having to make up two separate names for the same thing was a pain: one for the jQuery object and another for the corresponding DOM element. Aside from email, emailElement, and emailJQ, I continued to experiment with other options.

After that, I saw a pattern:

var email = $("#email");
var emailJQ = $(email);

The pattern finally dawned on me when I realized that $ is just another letter for names in JavaScript, and that I always got a jQuery object back from a $(whatever) call. I could make a $(…) call and remove a few letters, and the result would be something like this:

$("#email")
$(email)

Strikeout isn’t flawless, but you get the idea: both of those lines would look like this if some characters were removed:

$email

That’s when I realized I didn’t need to invent an emailElement or emailJQ convention. A wonderful convention was already staring me down: remove some characters from a $(whatever) call, and it becomes $whatever.

var $email = $("#email"), email = $email[0];
// $email is the jQuery object and email is the DOM object

and:

// email is a DOM element passed into this function
function doSomethingWithEmail( email ) {
    var $email = $(email);
    // $email is the jQuery object and email is the DOM object
    // Same names as in the code above. Yay!
}

So instead of having to create up two distinct names all of the time, I could just use the same one with or without the $ prefix. The $ prefix also served as a helpful reminder that I was working with a jQuery object:

$('#email').click( ... );

or:

var $email = $('#email');
// Maybe do some other stuff with $email here
$email.click( ... );

Answered by Michael Geary

Post is based on https://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign