Is encapsulation of Javascript code in objects affect performance?

Question

I wonder if it is more or less efficient to encapsulate the bulk of JavaScript code in an object? Thus, the entire volume of your program will be separated from other areas, such as a window.

For example, if the following code was in the JavaScript file:

/* My main code body. */ var somevar1=undefined; var somevar2=undefined; var somevarN=undefined; function somefunction(){}; function initialize(){/* Initializes the program. */}; /* End main code body. */ 

I could instead encapsulate the body of the main code in an object:

 /* Encapsulating object. */ var application={}; application.somevar1=undefined; application.somevar2=undefined; application.somevarN=undefined; application.somefunction=function(){}; application.initialize=function(){/* Initializes the program. */}; 

My logic is that since JavaScript scans all the variables in the scope until the correct one is found, storing specific functions and application variables in their own scope will increase efficiency, especially if there were a lot of functions and variables.

My only problem is that this is bad practice or maybe it will increase the time it takes to search for variables and functions inside a new area of ​​the application. If this is bad practice or completely useless, let me know! Thanks!

Answer 1

I don’t know what the performance implications are (I suspect that they are insignificant anyway, but if you are really interested, test it), but its a very common practice in JavaScript to save pieces of code in their own area, and not have everything in on a global scale.

The main advantage is reducing the risk of accidentally overwriting variables in the global scope and simplifying naming (i.e. you have window.application.initialize instead of, for example, window.initialize_application ).

Instead of your implementation above, you can use self-service functions to create a scope for only one bit of code. This is called a module template .

This has the added benefit of allowing you to create "private" variables that are only available in the module, and therefore arent available from other code running in the same global object:

 /* Encapsulating object. */ var application=( function () { var someprivatevar = null// This can't be accessed by code running outside of this function , someprivatefunction = function () { someprivatevar = someprivatevar || new Date(); }; return { somevar1: undefined , somevar2: undefined , somevarN: undefined , somefunction: function(){} , getInitialized: function () { return someprivatevar; } , initialize: function (){/* Initializes the program. */ someprivatefunction(); } }; })(); application.initialize(); application.getInitialized();// Will always tell you when application was initialized 

Answer 2

I understand that you asked a yes or no question. However, my answer was not worried about this, and to support this, I want to publish a quote from Eloquent Javascript by Marijn Haverbeke.

The dilemma of speed and elegance is interesting. You can see it as a kind of continuum between friendliness and machine-friendliness. Almost any program can be executed faster, it is more and more confusing. The programmer must decide on the appropriate balance .... The basic rule, which was repeated by many programmers and with which I completely agree, is not to worry about efficiency until you know that the program is too slow. If so, find out which parts take the most time and begin to exchange elegance for efficiency in these parts.

Answer 3

Easy-to-read code is key to my problem here, so I will follow a modular approach, even if there is a slightly longer search chain for variables and functions. Any method seems to have pros and cons as it is.

On the one hand, you have a global scope, which from the very beginning contains several variables. If you put all of your code in a global scope, your list of variables in that scope will include your own as well as variables such as innerWidth and innerHeight. The list for searching with references to variables will be longer, but I think this is such a small amount of overhead, which is ridiculous to worry about.

On the other hand, you can add only one object to the global scope, which contains all the variables that you want to work with. From within this area, you can easily reference these variables and avoid searching for global variables such as innerWidth and innerHeight. Con is that when you access your encapsulated variables from the global scope, you will have a longer search chain, such as: globalscope.customscope.myvar instead of globalscope.myvar or just myvar.

When I look at it like this, it seems like a very trivial question. Perhaps the best way to do this is simply to encapsulate things that combine only for the declarative code, and focus on readability, rather than the uselessness of unreadable code, which is only slightly more efficient.