What Does ‘$’ Mean in JavaScript? 8 Dollar Sign Use Cases

The Dollar “$” sign in JavaScript is a character that can hold different meanings depending on its context. It can be an identifier for variables, functions, or even libraries.

Unlike some other programming languages, JavaScript does not give any special meaning to the $ sign; it is treated like any other letter or underscore (_).

This means you can start the name of a variable or function with $, use it in the middle, or at the end.

Read What Do The Three Dots (…) Mean in JavaScript?

1. Variable or Function Identifier:

Developers often use $ as a prefix in variable names to indicate that a variable is a jQuery object or to mimic private variables when the language itself doesn’t support such visibility.

• Here’s an example:

let $amount = 100;
function $calculateTax(price) {
  return price * 0.05;
}

This usage is just a convention and has no functional difference from using an underscore or a letter.

• Here’s another example:

let $paragraph = document.querySelector('p');
console.log($paragraph.textContent);

In this example, $paragraph is a variable that holds a reference to a paragraph element in the DOM. The $ has no special meaning to JavaScript here—it’s simply part of the variable name.

2. With jQuery:

The most well-known use of the dollar sign is with jQuery, a fast, small, and feature-rich JavaScript library.

In jQuery, the dollar “$” sign is an alias for jQuery(), the main function in the library used to select elements. Also to create new elements, and call jQuery methods

$(document).ready(function() {
  $('p').text('Hello, world!');
});

Here, $ is used as an alias for the jQuery function. The selector $('p') fetches paragraph elements, and .text() is a jQuery method that updates the text content of these elements.

3. Template Literals:

Introduced in ES6 (ECMAScript 2015) and later, the dollar sign is used inside template literals to embed expressions within strings.

The $ sign, combined with curly braces (${}), is used to interpolate variables or expressions within a string:

let name = 'John';
let greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, John!

In this example, ${name} is replaced by the value of the name variable within the string.

4. In Libraries and Frameworks:

Aside from jQuery, other libraries and frameworks may also use $ as part of their syntax.

For instance, AngularJS uses $ to prefix its built-in services, and Vue.js uses $ to refer to instance properties.

• Example: AngularJS Service:

angular.module('myApp').controller('MyController', function($scope) {
  $scope.message = 'Hello!';
});

In this AngularJS snippet, $scope is an AngularJS service that the controller uses for binding data between the view and the model.

• Example 2: Vue.js Instance Property:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted() {
    console.log(this.$el); // refers to the DOM element with id="app"
  }
});

Here, $el is a property provided by Vue.js that references the DOM element managed by the Vue instance.

• Another example, some developers use $ as a shortcut for document.getElementById in their own code:

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

var myDiv = $('myDiv'); // equivalent to document.getElementById('myDiv')

This is a custom shortcut and not part of any JavaScript standard or library by default.

5. As a Function or Method Name

Some developers might name their functions or methods with $ to indicate a specific pattern or convention they follow, like private functions in an object.

function $calculateTax(price) {
  const taxRate = 0.2;
  return price * taxRate;
}

let tax = $calculateTax(100);
console.log(tax); // Output: 20

In this function, $calculateTax is simply a naming convention chosen by the developer.

6. Destructuring With Aliases

The $ sign can also be used in destructuring assignments when you want to create a variable with a different name than the property name.

const obj = { name: 'John', age: 30 };
const { name: $name, age: $age } = obj;

console.log($name); // Output: John
console.log($age); // Output: 30

Conclusion

The $ sign in JavaScript is not a built-in operator with a single specific use. Instead, it’s a versatile character that can be employed in a variety of ways depending on the context.

1. As a standard character in identifiers
2. As part of the jQuery library syntax
3. For string interpolation within template literals
4. In naming conventions within JavaScript libraries and frameworks
5. As a custom naming convention for functions or methods
6. While renaming variables in destructuring assignments

Read How to Lazy Load reCAPTCHA? Optimizing Website Performance