CODEWITHSUNDEEP
javascriptjqueryvariablesscope
Aaron
Aaron

Reputation: 2500

Returning Javascript Variables and Performance

I currently have all my script's required elements cached in a global object similar to this:

var MainObject={
   $El1 : $('#element1'), 
   $El2 : $('#element2')
   };

Inside my methods I can then just access the object directly. 

method1:function(){
   MainObject.$El1 // DO SOMETHING WITH THIS ELEMENT
}, ...

So, I have 2 questions.

I've read that local variables are the fastest. would it be better to write my methods like so?

method1:function(){
    var $El1=MainObject.$El1; 
    $El1 // DO SOMETHING WITH THIS ELEMENT
}, ...

and if so...

If I have many Methods in my script that reference these elements (which can quickly turn into quite a few lines) what would be the best way to condense them?

method1:function(){
   var $El1=MainObject.$El1,
       $El2=MainObject.$El1,
       $El3=MainObject.$El1,
       $El4=MainObject.$El1;

   $El1 // DO SOMETHING WITH THIS ELEMENT
},

method2:function(){
   var $El1=MainObject.$El1,
       $El2=MainObject.$El1,
       $El3=MainObject.$El1,
       $El4=MainObject.$El1;

   $El1 // DO SOMETHING WITH THIS ELEMENT
},

method3:function(){
   var $El1=MainObject.$El1,
       $El2=MainObject.$El1,
       $El3=MainObject.$El1,
       $El4=MainObject.$El1;

   $El1 // DO SOMETHING WITH THIS ELEMENT
},

Thanks!

Upvotes: 2

Views: 106

Answers (3)

Guffa
Guffa

Reputation: 700362

Local variables are faster, but not by much. You would need to access the variables several times inside the function to make up for the time it takes to copy the value to the local variable in the first place. If you use it only once, you will only have wasted that time.

Here is a performance test: http://jsperf.com/variables-vs-properties-2

Not only can you see that there is no big difference between looking up properties in an object and using a local variable, you can also see that you have to do this millions of time before the difference would be noticable.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707396

Adding code for premature optimization before you've measured that you actually have a performance problem in a particular method that needs solving is rarely, if ever, a good idea. It just adds more lines of code, takes longer to write and often doesn't solve any real problems.

Then, when you do have a performance issue to address, you need to measure carefully to find out what aspect of the method is really taking the time.

Yes, local variables are faster than global variables (the local scope is searched before the global scope to resolve a variable name). Yes, multiple references as in MainObject.$EL1 is slower than a single local reference.

Here's my general rule-of-thumb. If you're just using something like MainObject.$EL1 once or twice in a method, there's little advantage to caching it in a local variable. If you're using it three or more times, then it makes good sense to cache it locally just to prevent all the extra lookup. I would generally do the same in javascript as in C++.

If you have an actual performance issue and you want to make something faster, then your first intuition for what is the main cause of the performance issue is rarely correct. So, it makes a lot of sense to profile and find out what is really taking the most time. Then, when you are making changes, you need a way to measure the impact of the changes to know that you're actually making a difference when you add more code.

Upvotes: 3

thiagoh
thiagoh

Reputation: 7388

this getElements() function its impossible

The local variable ends with the scope.. once the scope is over the variable is also gone..

You should read these excellent posts JavaScript Variable Scope and Variable Scope

Upvotes: 1

Related Questions