Best Practice: Anonymous Closures

Manage Access & Namespaces via Closures

Anonymous Closures allow to maintain modularity and to prevent exposing the private modules data.

Global variables have unclear scope leading to tough manageable apps. Invocation of the global variables is expensive, because it checks entire scope depth.

The objects with the same names might be overridden if those are not within the separate namespaces.

Here are few points how to start doing better:

• use namespaces to prevent conflicts & unexpected overrides;
• use anonymous closures to encapsulate & isolate your app private data;
• return the result object with the only api that you want to expose;
• avoid direct global variables usage, use imports istead;
• group file content around needed data.

---- ##Anonymous Closure The parentheses, that immediately invoke the function enable the MYVEHICLE variable to immediately contain the object that serves as our module, rather than a function. var MYVEHICLE = function() { //-------------------- // private //-------------------- var type = "bike"; var speed = 0; //-------------------- // public //-------------------- return { maxSpeed: 60, color: "white", goForward: function() { speed += speed < this.maxSpeed ? 1 : 0; }, // getter getSpeed: function() { return speed; } }; }(); ---- ##Import third-party services Import globals as your module parameter instead of the using those directly. It creates a local variable, that is faster & more clear: var MYVEHICLE = function(cyclom) { ... cyclom.startTracking(); }(cyclometer); **Notice:** U've to pass your globals into *Immediately Invoked Function Expression*. ---- ##Module Augmentation We can easily provide extra properties to existing module. In the separate *\*.js* file we'll add a function which will decorate our existing module with the new properties & functionality. // not declaration, but augmentation MYVEHICLE = function(oldScope) { // private var newDefaultColor = "green"; // public oldScope.setColor = function(bikeColor) { color = bikeColor || newDefaultColor; } return oldScope; }(MYVEHICLE); **Watchout:** Private data, won't be accessible to the new functionality. *(only new private data will be accessible to it)*. > The module file and the augmentation file do not share their private data. > Augmented module properties may only access the private state from their file's closure. > Private data from the original closure won't be lost, and will be accessible to all its properties that referenced it. ---- ## see Also * [Best Practice: Watchout Wacky Decimals in JavaScript](http://bloomlab.blogspot.com.ee/2015/11/best-practice-watchout-wacky-decimals.html) * [Best Practice: Comparisons in JavaScript](http://bloomlab.blogspot.com.ee/2015/11/best-practice-comparisons-in-javascript.html); * [Best Practice: Executions & Memory Control in JavaScript](http://bloomlab.blogspot.com.ee/2015/11/best-practice-executions-memory-control.html) * [Best Practice: Loops Optimization](http://bloomlab.blogspot.com.ee/2015/11/best-practice-loops-optimization-in.html) * [Fun with an Algorithm complexity](http://bloomlab.blogspot.com.ee/2014/07/fun-with-algorithm-complexity.html) * [JS - The Right Way](http://jstherightway.org/) * [Tutorials Point - Best Practices](http://www.tutorialspoint.com/developers_best_practices/) * [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)