-2

I have a page I am building, and our solution to a problem involved wrapping some code inside a function then calling that when required.

Now the page is growing, and each item has its own function. According to D. Crockford each function is put in a VAR anyway so:

function functionName(){}

is equivalent to:

var var1 = functionName(){}

So now we have LOTS of vars in the page (I have also written them specifically in the latter format as Mr. Crockford promotes) and I am getting worried this creates too many variables (not sure this will cause any issues, performance or otherwise). I am thinking of making a single Object Literal and adding each function as a value to a key. This I think will reduce all these vars into a single manageable unit and reduce the amount of variables I am using (and avoid any potential issues) - or will it?

Thanks!

user1360809
  • 725
  • 2
  • 13
  • 24
  • 2
    Using a large object will prevent garbage collection. – TimWolla Mar 26 '14 at 16:28
  • What are the "potential issues"? – j08691 Mar 26 '14 at 16:28
  • Is this a single page application? – Eric Herlitz Mar 26 '14 at 16:29
  • 4
    http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem – j08691 Mar 26 '14 at 16:29
  • 2
    They're not the same, see: http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname?rq=1 – wrossmck Mar 26 '14 at 16:29
  • Since javascript work from the client side, you can use as much vars as the client computer allows. – adripanico Mar 26 '14 at 16:29
  • I doubt there is any practical upper limit on the number of variables. What you should do is organize your code into smaller, more manageable modules. It's more about code organization than system limitations. – Felix Kling Mar 26 '14 at 16:31
  • 1
    The *single manageable unit* approach is Namespacing; [How to set up JavaScript namespace and classes properly?](http://stackoverflow.com/questions/11651527/how-to-set-up-javascript-namespace-and-classes-properly) – Alex K. Mar 26 '14 at 16:31
  • https://www.youtube.com/watch?v=NnuHGeCMd4E – Pointy Mar 26 '14 at 16:37
  • Eric Herlitz - This is a single page application - in fact it is code copied from a DB using Drupal. @AlexK - So if I made a constructor (that held common elements resulting in there being a single function) then called that function passing in what required would that be equivalent to name-spacing (sorry for the noob question)? Its a better structure for the current application anyway... – user1360809 Mar 26 '14 at 16:37
  • 1
    The namespace approach allows you to tightly package your code in logically named units, this is of less benefit in a single page application but increases code organisation/readability and prevents pollution of the global namespace. – Alex K. Mar 26 '14 at 16:41

4 Answers4

2

var keyword is actually being used in order to manage variable scope. Not using var keyword makes the variable a global one. The memory occupied by the variables are cleared when the variable isn't used anymore. Most of the modern browsers contains a garbage collector responsible for freeing up the unused spaces. So it's suggested that using var keyword in blocks would make your js interpreter search less for the variable, otherwise it will search the whole document in order to get the value.

Reza
  • 2,896
  • 4
  • 26
  • 37
1

In performance terms it doesn't matter, you can use as many variables as you want, the performance only will be affected by the tasks performed in the function.

alexpereap
  • 180
  • 11
1

As you keep increasing the variables, the heap limit set by the relevant JS engine will come into play.

For eg - V8 engine seems to have it set to 1.4 GB

If you do ever run out of that, it's high time you recheck the code & stop blaming JS.

On a serious note, from a practical point of view, that's an enormous limit, which tells you that you don't need to worry about it so much.

Besides your friendly neighborhood GC will always keep cleaning up & ensure you live lavishly with variables.

loxxy
  • 12,990
  • 2
  • 25
  • 56
  • AWESOME! This is the type of 'potential issue' I was thinking of - everything has its limit... – user1360809 Mar 26 '14 at 16:55
  • Great. If you find an answer on SO satisfactory, you could mark the green tick next to the answer. – loxxy Mar 26 '14 at 17:00
  • In all honesty the comment by AlexK under the original post answers my Q best...this is great as it tell me what can go wrong with the current approach... – user1360809 Mar 26 '14 at 17:30
  • Of course. You can even consolidate all useful points into an answer & post + accept it yourself. The goal, is simply to help anyone with a correct answer, who comes looking here for an answer, in future. – loxxy Mar 26 '14 at 17:40
  • Just to be sure, will this only effect run time (as in when/if a function is called with all these vars in it - what about global vars?) as otherwise it will simply be text on a page, or at runtime will EVERYTHING be evaluated when the page is loaded? – user1360809 Mar 27 '14 at 10:46
0

Encapsulating your code in a namespace is a good idea but you won't save memory or get a performance boost that way. From performance perspective both ways you've shown are the same.
There is a convention to avoid nameclashing however based on reverted domain - imagine a JS lib made for SO:

 // The following two lines are to protect namespace from overwriting and allow to
 // extend them easily
 if (!com) var com = {};
 if (!com.stackoverflow) com.stackoverflow = {};

 com.stackoverflow.renderSomething = function(){
     // Some very clever code here
 };

There is nothing else you can gain this way but it's worth to organize your code this way.

And just to clarify:

function functionName(){};

is almost the same as

var functionName = function(){};

Almost because in the first form functionName is defined at parse-time and the latter form defines functionName at run-time.

ElmoVanKielmo
  • 10,907
  • 2
  • 32
  • 46