Javascript global variables or object variables

Question

Hi all,

I prefer to declare one Javascript file for my all website. I am trying to decrease the usage of global variables. My examples at the below, in both case each object has a myName field.

1. I would like to know when they are initialized?
2. And In terms of memory and efficiency which one is more effective?
3. For variable a, is declaring a.myName the same as global "var myName = Rebecca" ?

var a = {
   myName : 'Rebecca' ,

   sayHello : function() {
      console.log(this.myName);
   }
};

var b = {
   myName : function() {
      return 'Rebecca';
   },

   sayHello : function() {
      console.log(this.myName());
   }
};

Thanks

Answer 1

They will be initialized when the statements are first encountered. In a, 'Rebecca' is initialized as the value for the myName key. In b, it's just data internal to the myName (anonymous) function. a will be slightly more efficient because it avoids a function call. I also find it more readable in this simple example.

I find the choice to put everything in a single file questionable. In some cases, you want a modular design. And since you're worried about efficiency (albeit perhaps prematurely), note that having one big file can actually hurt performance if pages include code they don't need.

Answer 2

a doesn't make any sense, because you're logging a function reference. B is the way to go, since you're actually invoking the method, using ().

Answer 3

1) They are initialized when the script is processed in the browser, unless you declare the objects in an event handler. In that case the object is created when the event script is executed.

2) In terms of efficiency, a will probably be more efficient. Note though that in the first case you use a.myName and in the second b.myName() to get the value of the property.

3) No. If you assign a value to a property of an object, you always have to get that value through the object. In this case either a.myName or a['myName'].

Answer 4

1. I believe these will be initialized identically (i.e. when the code is reached). What's different is what's happening when they are initialized and where the load is placed when their data is actually required.

2. To me, it would depend a lot on what you were expecting to have in myName. If it were just a string, I'd avoid the function and go with choice a. On the other hand, if there were a great deal of logic involved and that logic might not need to be invoked (for example, if it only gets executed when a user clicks on a button or the application reaches a certain state), I'd go with choice b. As I understand it, the function does consume memory and won't get garbage collected (which is a minus), but it also won't consume CPU resources until it's actually needed (which can be a huge plus).

3. I'm not sure I understand the question, but I'd say it's not the same. If the only member of a is myName then the two are equivalent (both are occupying the global namespace. But if you have multiple properties, the savings become obvious. From your examples, I think it's clear you understand this, so again I may not understand the question.