jQuery: is val() fast enough to use repeatedly or is it better to put the value in a variable

Question

If you are doing something like the following:

var i = $('input[@name=some_field]');
if (i.val() != '' && !(i.val() >=1 && i.val() <= 36) || i.val() == 'OT')) {
     i.focus();
}

is i.val() fast enough to use it multiple times or should you do:

var value = i.val();

first and then use value in the if statement, like:

var i = $('input[@name=some_field]');
var value = i.val();
if (value != '' && !(value >=1 && value <= 36) || value == 'OT')) {
     i.focus();
}

...?

Answer 1

This isn't necessarily a jQuery question but it applies pretty well to most programming languages. And in fact, there's a lot more to this question than just performance issues.

One thing to keep in mind is that if you store the value, then there is no possibility that it will change during the execution of your subsequent code. Most of the time, this is what you expect and want. But it is also possible in some circumstances that the call to val() will return a different value, especially if you are looping and doing something that takes any significant time.

In your particular example, the chances of this occurring are pretty low because it's only a few calls and not in a looping construct. Given that there are only a few calls, performance likely won't be a major concern here. But the theory of the point remains - if you want to guarantee that the value doesn't change, put it in a variable. Since it also gives you the best of the performance considerations, I think this would be a best practice in most cases.

Answer 2

When called without any parameters, I don't believe val() would be significantly slower then just accessing the value property directly. Based on my reading of the jQuery source code, essentially all the val() method does is check whether the element is a select, and if not, simply returns the content of the value property (with \r characters removed). There's going to be some overhead from the function call, and a little overhead for the string replace, but nothing I've read indicates that the overhead would be significant.

If you're really concerned, try benchmarking the code in question over a large number of iterations. Otherwise, just pick which ever method looks cleanest to your eyes and go for it.

Answer 3

If you look in the jQuery code you'll all the stuff that happens when executing the val() function, so yeah i suggest to assign it to a variable, without repeatedly executing it.

Answer 4

You aren't going to take a performance hit from calling jQuery's val.

It is slower than the native DOM .value call as you incur the additional overhead of an extra function call as well what goes on inside the function - see function definition of val here. Unless you are doing this hundreds of times you're not going to notice it.

I'd pick which ever way you feel is more readable and go with that.one way or the other and stick to it in your code! Personally I'd just call val everytime I need it and save the extra assignment line.

Answer 5

In general, I would say never call a function more than once to get the same value. You'll make your code more readable and more efficient, if only by avoiding the function call overhead.