The difference between this and $(this) in jQuery

Like many web developers before me, I started my JavaScript journey with jQuery. At the time, something I often wondered was: what's the difference between this and $(this)? Let's break it down.

this: a native JavaScript keyword

The essential thing to understand is that this is a special keyword in JavaScript whose meaning changes depending on how a function is invoked. It's a native JavaScript thing, not a jQuery thing.

Better developers than me have already explained this in great detail, so rather than butcher it, I'll defer to them:

• What the lexical is this? by Steve Griffith
• You Don't Know JS: this & Object Prototypes by Kyle Simpson
• Understanding the 'this' keyword in JavaScript by Todd Motto

this vs $(this)

With that in mind, imagine we have a list of colours in the rainbow:

<ol>
  <li>Red</li>
  <li>Orange</li>
  <li>Yellow</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Indigo</li>
  <li>Violet</li>
</ol>

Let's select all the list items and save the resulting jQuery object to a variable. Then we can iterate over it using the .each() method provided by jQuery:

const $listItems = $("li");

$listItems.each(function () {
  console.log(this); // HTMLLIElement
});

On each iteration, the this keyword refers to the current list item in the loop. But it refers to the native JavaScript object (an HTMLLIElement object) and not a special jQuery object.

This means we have access to the object's native JavaScript properties and methods, but not the special ones provided by jQuery.

For example, if we wanted to log out the text inside each list item, we could use the native .textContent property:

$listItems.each(function () {
  console.log(this.textContent);
});

If we wanted to instead use the special .text() method provided by jQuery, we would need to construct a jQuery object from the native JavaScript object. To do that, we would pass it into the jQuery() constructor (which is more commonly written with the dollar sign we all know and love):

$listItems.each(function () {
  // Construct the jQuery object
  const $this = $(this);

  // Use the .text() method provided by jQuery
  console.log($this.text());
});

Bonus: avoiding this

A lot of developers find the this keyword scary. If you're not comfortable with it yet, you can handle the situation differently. The .each() method actually gives you access to the current element as the second parameter to its callback function:

$listItems.each(function (index, listItem) {
  // Construct the jQuery object
  const $listItem = $(listItem);

  // The native .textContent property
  console.log("Native:", listItem.textContent);

  // The special .text() method provided by jQuery
  console.log("jQuery:", $listItem.text());
});

Summary

The this keyword is a native JavaScript keyword whose meaning changes depending on how a function is invoked. On its own, you only have access to the object's native properties and methods. Wrapping it within a call to the jQuery() constructor creates a jQuery object and gives you access to all the special methods provided by jQuery.

If you're not yet comfortable with the this keyword, you can instead use the second parameter to the .each() method's callback function, which always refers to the element in the current iteration of the loop.

I've made a demo for all of the above on CodePen.