Kodeclik Blog
What does $ mean in Javascript?
In JavaScript, the dollar sign ($) is a valid character for identifiers with specific uses in certain contexts. While it doesn't trigger special built-in behavior in vanilla JavaScript like operators do, it has conventional meanings and serves important functions in popular libraries and modern JavaScript features. Here are some of its common uses:
Usage 1: As an identifier for variables or functions
Consider the below piece of code:
const $myVariable = 'Hello';
console.log($myVariable); // Output: Hello
function $greet(name) {
console.log(`Hello, ${name}!`);
}
$greet('Alice'); // Output: Hello, Alice!This example demonstrates the use of $ as part of both variable and function names. It starts by declaring a constant variable named $myVariable and assigning it the string value 'Hello'. This variable is then logged to the console. By using the dollar symbol before the name we are declaring that we need the value of that variable, in this case, ‘Hello’.
Following this, a function named $greet is defined, which takes a name parameter and logs a greeting message. Note that the function name happens to have “$” in it. (We could have defined it without the dollar.) The function is then called with the argument 'Alice', resulting in a personalized greeting being printed to the console.
To drive the last point home, below is another piece of code:
// Function defined without $
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Alice'); // Output: Hello, Alice!
// Function defined with $
function $greet(name) {
console.log(`Hello, ${name}!`);
}
$greet('Bob'); // Output: Hello, Bob!In this example, both greet and $greet are valid function names. They work identically, with the only difference being their names. The choice to use $ or not is often a matter of coding style or convention, rather than functionality. Some developers use $ to denote certain types of functions (like jQuery selectors), but in vanilla JavaScript, it's purely a stylistic choice.
Usage 2: As an element selector in the jQuery library
Here is a second example:
// Selecting an element with id 'myElement' and adding a class
$('#myElement').addClass('active');
// Binding a load event to the window
$(window).bind('load', function() {
console.log('Window loaded');
});This code snippet illustrates the use of $ as a shorthand for jQuery, a popular JavaScript library. In this example, $('#myElement') selects an HTML element with the id 'myElement' and adds the class 'active' to it using the addClass() method. The next line demonstrates event binding in jQuery, where $(window) selects the window object, and the bind() method attaches a 'load' event listener to it. When the window finishes loading, the provided function will execute, logging 'Window loaded' to the console. This example highlights how $ is commonly used as a concise way to access jQuery's functionality.
Usage 3: In template literals for string interpolation
Finally, consider this piece of code:
const name = 'John Doe';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message);
// Output: My name is John Doe and I'm 30 years old.This example showcases the use of $ within template literals for string interpolation in JavaScript. It begins by declaring two variables: name and age, with respective values 'John Doe' and 30. Then, a template literal is created and assigned to the variable message. Within this template literal, ${name} and ${age} are used to interpolate the values of the name and age variables into the string. When the message is logged to the console, the resulting output is a coherent sentence that incorporates the variable values seamlessly. This demonstrates how $ is used in template literals to embed expressions and variables directly within string literals, making string composition more readable and convenient.
In conclusion, the dollar sign ($) in JavaScript serves as a versatile character that plays multiple roles depending on context. While it doesn't have special built-in functionality in vanilla JavaScript like operators do, it has become an important part of the JavaScript ecosystem.
Want to learn Javascript with us? Sign up for 1:1 or small group classes.
