Should You Use the ‘var $this = $(this);’ Syntax in jQuery?

The other day I tweeted that I

May succumb to this this syntax: var $this = $(this);*

May succumb to this this syntax

Click image to see original Facebook thread

Because I use Hootsuite and it’s a simple button push, I also posted it to Facebook. George Winters saw it there and wondered what I meant.

I was referring to a common jQuery coding practice.

var $this = $(this);

In the past, my answer on whether this practice was useful or necessary has always been “no”. I tend to use the convention of naming my variables like this:

var thisTermId = $(this).attr("a9");

and I’ve felt that this was enough “this” stuff. (Yes, this post is going to have a lot of this this stuff in it.)

So why do we care?

In this example, I’m parsing out the results form a call to the TaxonomyClientService GetChildTermsInTerm operation. (More on this in a later post.) We get back a text representation of the XML which ends up looking like this after some conversions:

<TermStore>
  <T a9="988b1b74-3b87-4f40-a6ee-066e592fbe89" a21="false" a61="0" a1000="227">
    <LS>
      <TL a32="Cereal" a31="true"/>
      <TL a32="Breakfast Treat" a31="false"/>
      <TL a32="Grains" a31="false"/>
      <TL a32="Bowl of breakfast" a31="false"/>
    </LS>
    <DS/>
    <TMS>
      <TM a24="d8110aa1-d8c2-4e0f-8a99-7e82db8a32dd" a12="Breakfast Foods" a40="" a17="true" a67="" a45="988b1b74-3b87-4f40-a6ee-066e592fbe89"/>
    </TMS>
  </T>
  <T a9="b793fd58-45b7-4540-9098-140815864900" a21="false" a61="0" a1000="291">
    <LS>
      <TL a32="Bacon" a31="true"/>
      <TL a32="Manna" a31="false"/>
      <TL a32="Rackley's Favorite Food" a31="false"/>
    </LS>
    <DS/>
    <TMS>
      <TM a24="d8110aa1-d8c2-4e0f-8a99-7e82db8a32dd" a12="Breakfast Foods" a40="" a17="true" a67="" a45="b793fd58-45b7-4540-9098-140815864900"/>
    </TMS>
  </T>
  ...
</TermStore>

The data is pretty well organized, but I need to get it into an array so that I can use it in my application. To do this, I use jQuery selectors and .each() logic to iterate through the data, much like C# folks use enumerators.

In jQuery, when you use a selector, you can refer to the matches with $(this). Here’s a simplified version of the code I’m using:

$($termsXML).find("T").each(function() {
  var thisTermId = $(this).attr("a9");
  var thisTermName = $(this).find("TL[a31='true']").attr("a32");
  ...
});

In the example, I’m finding all of the elements (terms) in the $termsXML jQuery object and then parsing out two of the attributes inside them. I’m using $(this) in two different places (and in the actual code, many more places). Many JavaScript developers would do this instead:

$($termsXML).find("T").each(function() {
  var $thisTerm = $(this);
  var thisTermId = $thisTerm.attr("a9");
  var thisTermName = $thisTerm.find("TL[a31='true']").attr("a32");
  ...
});

There are a few benefits:

  • $(this) is only evaluated once (minor efficiency)
  • You can use a more descriptive name for $(this). I’m using $thisTerm above because it’s a taxonomy term.
  • By preceding the variable name with the $ sign, you’re reminding yourself that it’s a jQuery variable, not just a plain old JavaScript variable.

This all is really up to you. JSLint and JSHint don’t care whether you do this or not, but your code may be more readable over time. Whatever conventions you decide to follow, the more important thing is that you remain consistent over time. I’ve not used the $this syntax before and if I start doing it selectively in SPServices, for instance, I’ll have a tougher time maintaining it.


* I love playing with words like that. Check out this great picture I saw on Facebook the other day. But I digress…ship-shipping ship