Is it okay to store the result of a JQuery selector in a variable?

Question

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?

Answer 1

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.