Why Create jQuery Object Variables?

Question

I see a lot of jQuery examples that do something like

var $element = $('#element');
$element.foo...

rather than just typing

$('#element').foo...

and I do realize there is a small bit of typing saved if you are working with $element a lot, but what about those times that $element is only called once or twice? Why do some developers declare it as a jQuery object variable in those instances? Is it also more efficient for the browser to process?

If you're only re-using it once or twice, then no, there's no real improvement at all. — j08691
– j08691, Commented Apr 4, 2014 at 21:00
You save maybe 6-7 bytes everytime it's minified, and that's something. — adeneo
– adeneo, Commented Apr 4, 2014 at 21:01
Why do they do it when it's only used once? Who knows. You'd have to ask the developer. Why when only twice? It's a judgement call, and depends on the situation. Is the code in a loop? In a rapidly invoked event handler? — cookie monster
– cookie monster, Commented Apr 4, 2014 at 21:01
@cookiemonster - while it is a judgment call, re-querying the DOM for the same object twice is not a good judgment. Caching it when it is only used once serves no benefit, but caching it on multiple uses (even as little as two) is always more efficient because it prevents the DOM from being queried multiple times for the same object. — PlantTheIdea
– PlantTheIdea, Commented Apr 4, 2014 at 21:03
@adeneo - "micro optimization is usually avoided" ... you and i come from very, very different perspectives then. — PlantTheIdea
– PlantTheIdea, Commented Apr 4, 2014 at 21:38

Travis J · Accepted Answer · 2014-04-04 21:00:49Z

Usually this is done to avoid either re-wrapping an element or re-querying the page for the selector.

Such as in a click event

$('.className').click(function(){
 var $this = $(this);
 callSomeHelper($this);
 $this.hide();
 if( $this.data("placement") == "somePlacement" ){
  //some logic
 }
});

The real saver is when it is referencing a set of elements.

var $allSides = $('.side');

And now back in the click event, you can reference this without having to re-query

$('.top').click(function(){
   var door = $allSides.find(':visible');
});

There are obviously more in depth examples, but these two are the main cases that the variable is stored.

Michał Staniewski · Accepted Answer · 2014-10-16 14:03:06Z

-3

It prevents from overwriting variable from another script

edited Oct 16, 2014 at 14:03

answered Apr 4, 2014 at 21:00

Michał Staniewski

3504 silver badges12 bronze badges

Collectives™ on Stack Overflow

Why Create jQuery Object Variables?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related