JQuery/JavaScript performance using $(this)

Question

I find myself doing a lot of this kind of JQuery:

$('.filter-topic-id').each(function () {
    var me = $(this);
    if (me.text() == topics[k]) {
        me.parent().show();
    }
});

I store $(this) in a variable called me because I'm afraid it will re-evaluate $(this) for no reason. Are the major JavaScript engines smart enough to know that it doesn't have to re-evaluate it? Maybe even JQuery is smart enough somehow?

Answer 1

They are not smart enough to know not to revaluate $(this) again, if that's what your code says. Caching a jQuery object in a variable is a best practice.

If your question refers to your way in the question compared to this way

$('.filter-topic-id').each(function () {
    if ($(this).text() == topics[k]) { // jQuery object created passing in this
        $(this).parent().show(); // another jQuery object created passing in this
    }
});

your way is the best practice.

Answer 2

this is just a reference to the current DOM element in the iteration, so there's little or no overhead involved when calling $(this). It just creates a jQuery wrapper around the DOM element.

Answer 3

You could try to profile your code with Firebug and see if using $(this) many times slows your app or not

Answer 4

There is no good way that a javascript can determine that the following is true:-

fn(x) == fn(x);

Even if this was possible not calling the second fn could only be valid if it could be guaraneed that fn has not have other side-effects. When there is other code between calls to fn then its even more difficult.

Hence Javascript engines have no choice but to actually call fn each time it is invoked.

The overhead of calling $() is quite small but not insignificant. I would certainly hold the result in a local variable as you are doing.

Answer 5

I think you'll find that calling the jQuery function by passing a dom element is perhaps the least-intensive of ways to construct the object. It doesn't have to do any look-ups or query the DOM, just wrap it and return it.

That said, it definitely doesn't hurt to use the method you're using there, and that's what I do all the time myself. It certainly helps for when you create nested closures:

$('div').click(function() {
    var $this = $(this);
    $this.find("p").each(function() {
        // here, there's no reference to the div other than by using $this
        alert(this.nodeName); // "p"
    });
});

Answer 6

Are the major JavaScript engines smart enough to know that it doesn't have to re-evaluate it?

No. But if you are using jQuery you are presumably aiming for readability rather than necessarily maximum performance.

Write whichever version you find easiest to read and maintain, and don't worry about micro-optimisations like this until your page is too slow and you've exhausted other more significant sources of delay. There is not a lot of work involved in calling $(node).