Developers I know tend to call the same JQuery selectors over and over instead of storing the result in a variable. They are consistent with this approach.

For example, they do this:

var propName = $(this).attr('data-inv-name');
var propValue = $(this).attr('data-inv-value');

Instead of this:

var current = $(this);
var propName = current.attr('data-inv-name');
var propValue = current.attr('data-inv-value');

The latter approach feels correct to me but maybe I'm missing something. This is a simple example, but I've seen $(this) repeated dozens of times in the same function.

What is the best practice for development with JQuery? Call selectors repeatedly or store in a variable?

Developers I know tend to call the same JQuery selectors over and over instead of storing the result in a variable. They are consistent with this approach.

For example, they do this:

var propName = $(this).attr('data-inv-name');
var propValue = $(this).attr('data-inv-value');

Instead of this:

var current = $(this);
var propName = current.attr('data-inv-name');
var propValue = current.attr('data-inv-value');

The latter approach feels correct to me but maybe I'm missing something. This is a simple example, but I've seen $(this) repeated dozens of times in the same function.

What is the best practice for development with JQuery? Call selectors repeatedly or store in a variable?

• javascript
• jquery
• jquery-selectors

• 1 It's actually good practice to store elements in variables rather than looking them up in the DOM if you're going to use them over and over again, however when it comes to this it's a special kind of internal variable that isn't looked up again, so it's already cached, and probably better than most things, but you would save a function call to jQuery. – adeneo Commented May 28, 2015 at 19:10
• And dupe -> stackoverflow.com/questions/10432228/storing-this-in-a-variable – adeneo Commented May 28, 2015 at 19:12
• 2 Not really a dupe. The example I gave was $(this) but I'm asking about selectors in general. $('#someid'), $('.someclass'), etc. – Joe B Commented Jun 1, 2015 at 14:53

3 Answers 3

The shown analysis is a micro optimization. Using $(this) repeatedly versus storing $(this) in a variable and reusing it will not cause a significant hit to performance.

The times you really want to store the result is when there is an actual selector in there. The only hit you are taking by repeatedly calling $(this) is calling the jQuery constructor function which is very lightweight.

So in this instance go with what reads better. If there really is a dozen occurrences of $(this) in a row, then there should have either been some storing of the variable as indicated, or more likely there was an opportunity to take advantage of chaining which was missed.

If I'm going to use the same selector more than twice I always create a variable. The one change I would recommend is using $ before your variable name to signify that it is a jQuery object

var $current = $(this);
var propName = $current.attr('data-inv-name');
var propValue = $current.attr('data-inv-value');

In theory selecting the component many times demands more process then using one you already have...

If you don't have too many selectors in your page the diference will be almost null (I guess this is the more commom case)... Then you can think about what makes it more readable or easy to modify...

Sometimes you use the same element in a dozen of lines, in this case I prefer to assign this to a variable because when the element change I will need to change just one line (the line I assigned the variable)...