jQuery .get() vs Bracket Notation Explained

When working with jQuery collections, developers often need to access the underlying native DOM elements. Both the .get() method and standard JavaScript square bracket notation ([]) serve this fundamental purpose, yet they behave differently when handling negative indexes, converting collections to native arrays, and processing method execution. Understanding these differences ensures you choose the most reliable and readable approach for your codebase.

The Core Similarity: Retrieving Native DOM Elements

Both .get(index) and [index] retrieve the raw HTML DOM element from a jQuery object rather than a jQuery-wrapped object. For example, if you have a selection of list items:

const elementViaMethod = $('li').get(0);
const elementViaBracket = $('li')[0];

Both variables will reference the identical native HTMLLIElement. If you instead need to keep the element wrapped in jQuery to chain additional jQuery methods, you would use .eq(0).

Negative Index Support

The most significant functional difference lies in how each handles negative integers:

  • .get(index) supports negative indexes: jQuery interprets negative numbers as counting backward from the end of the matched set. Calling $('li').get(-1) will reliably return the last DOM element in the collection, $('li').get(-2) returns the second-to-last, and so on.
  • [index] does not support negative indexes: In standard JavaScript, array-like bracket notation treats the index as an object property key. Using $('li')[-1] searches for a property named "-1" on the jQuery object, which does not exist, returning undefined.

Converting to a Native Array

The .get() method provides functionality beyond single-element retrieval:

  • .get() without arguments: If you invoke .get() with no parameters, jQuery converts the entire collection into a standard JavaScript array containing all the matched DOM elements.
  • Bracket notation: Bracket access requires an explicit key or index. It cannot transform or clone the jQuery object into a native array.
// Returns a standard JavaScript Array of elements
const elementsArray = $('li').get();

Performance and Syntax

Bracket notation ($('li')[0]) bypasses function invocation and retrieves the property directly from the jQuery object wrapper, offering a slight performance advantage over .get(0). However, for modern browsers and typical web applications, this performance gap is negligible.

Summary of When to Use Which

  • Use bracket notation ([i]) when you are passing a known positive index or iterating using a standard loop and want the most concise syntax.
  • Use .get(i) when you need to access elements from the end of a collection using negative indexes.
  • Use .get() without arguments when you need a true JavaScript Array of DOM nodes to use with native array methods like .map(), .filter(), or .forEach().