Javascript Object Performance Preference

Question

There is probably a duplicate of this question on SO, but I haven't quite found one that specifically addressed my question.

Suppose I am building a web app that will contain one of the following:

1. A JS Object with about 100 properties, 5 of which are sub-objects with maybe 10 or 15 properties each about 2/3's of which are functions. So something like:

   Obj={
       x:y,
       y:z,
       obj1:{
         func:func(),
         num:1,
         func2:func2()
       },
       obj2:etc
   }
   

2. Or several different objects where there is still one with 100 or so properties, but the other objects that will be running functions will live in the global namespace, something like this:

   Obj={
       x:y,
       y:z,
       etc:andthensome
    }
   obj1={
       func:func(),
       num:1,
       func2:func2()
   }
   obj2={
      etc:'I am also a larger objects with functions'
   }
   

The first way keeps the global namespace cleaner, but makes for more recursive property and function searching, and may makes keeping this straight slightly more confusing.

The second way is easier to grok, but adds more objects into the global namespace and may also perform slower (that is the question kind of).

My question is, is there any significant benefit to using one way or the other - or are they both 'good', both 'bad'?

I know a lot has to do with developer preference, so another way of asking a similar question - closer to what I really want to know:

Is the performance hit greater when using many smaller objects, or one or a few large objects with with a large number of sub-objects and functions, etc.?

Answer 1

There shouldn't be any significant performance hit on lookups, the code structure is irrelevant to that. Any of these structures still just contain references to objects, the lookup time for those objects will be the same regardless.

You should structure your objects to match your data and increase clarity in your code. If an object is a separate concern from another object, don't make it a property. If its directly related, then it may make sense for it to be a property of the other object. There is no real performance concern here, this is about structuring your code so its readable, clear, and easy to work with.

Answer 2

Fewer lookups are more performant, but it doesn't matter.

You should optimize your code for being easier to maintain, and worry about performance only if performance has become an issue.

More importantly, if performance has become an issue, use a performance analysis tool to find bottlenecks in your code.

As far as more global pollution, you should never add objects to the global namespace unless you explicitly want them there. To avoid pollution, all code belongs in an Immediately Invoked Function Expression (IIFE):

(function () {
    var obj = {
        foo: 'bar',
        ...
    };
}());
console.log(window.obj); //undefined, no accidental global pollution