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:

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.