Prefixing jQuery Object Variables

This article provides a clear overview of the industry-standard naming convention for jQuery object variables in JavaScript development. You will learn the specific prefix used by developers worldwide, the technical reasoning behind this practice, and how adhering to this convention prevents performance bottlenecks and improves code readability.

The Standard Convention: The $ Prefix

The universal convention for naming variables that store jQuery objects is to prefix the variable name with a dollar sign ($).

When a variable is assigned the result of a jQuery selector or constructor, it contains a jQuery wrapper around one or more DOM elements, rather than a raw DOM node or a standard JavaScript data type.

// Recommended: The variable contains a jQuery object
const $submitButton = $('#submit-btn');
const $navigationLinks = $('nav a');

// Non-prefixed: Typically reserved for native DOM elements or plain data
const submitButton = document.getElementById('submit-btn');
const buttonText = 'Submit';

Why Use the Dollar Sign Prefix?

1. Distinguishing jQuery Objects from Native DOM Elements

A native DOM element and a jQuery-wrapped object have entirely different APIs. A native element provides access to properties like element.innerHTML or element.addEventListener(). A jQuery object provides access to jQuery methods like $element.html() or $element.on(). Prefixing with $ immediately clarifies which methods and properties are available without needing to trace the variable back to its declaration.

// Native DOM element
const userContainer = document.querySelector('.user-container');
userContainer.classList.add('active');

// jQuery object
const $userContainer = $('.user-container');
$userContainer.addClass('active');

2. Preventing Redundant DOM Lookups (Caching)

Querying the DOM repeatedly with $('#item') creates performance overhead because the browser has to traverse the DOM tree on every call. Caching the result in a variable solves this issue. The $ prefix indicates that the selector has already been evaluated and cached.

// Inefficient: Repeated DOM queries
$('#item').addClass('highlight');
$('#item').text('Updated');

// Efficient: Caching with the prefix convention
const $item = $('#item');
$item.addClass('highlight');
$item.text('Updated');

3. Avoiding Double-Wrapping

Developers often accidentally wrap an existing jQuery object inside another jQuery call, such as $($cachedItem). While jQuery handles this without throwing an error, it creates an unnecessary object allocation. The prefix makes it obvious that the variable is already a jQuery collection:

const $sidebar = $('.sidebar');

// Clearly redundant:
// $($sidebar).show();

// Correct:
$sidebar.show();

Summary of Best Practices

  • Use $ for jQuery wrappers: Prefix any variable holding a jQuery object with $ (e.g., $header, $modalWindow).
  • Omit $ for native DOM references: Keep native element variables standard (e.g., headerElement, modalWindow).
  • Maintain consistency: Apply camelCase formatting after the dollar sign (e.g., $mainContainer, not $main_container).