getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2018
getButterfly

Cutting Loose: Dynamic Namespacing in JavaScript

Most of the JavaScript libraries come wrapped in an easy to refer single object. The object acts as a namespace, tightly wrapping everything related to the library and provides a clean systematic handle to access the functionality of the library. For instance, here is a your own awesome library that you just built:

var myAwesomeLibrary = {
    _prop1: '', // private property - should not be accessed externally
    prop2: '' // public property.
};

// public function of the library
myAwesomeLibrary.fn = function(){};

//function meant for internal usage. Should not be called from outside
myAwesomeLibrary._fn2 = function(){};

This is all fine and dandy till you decide that you want to call your new shiny thing myFunkyLibrary instead of myAwesomeLibrary. Suddenly, you find yourself find-and-replacing every occurrence of myAwesomeLibrary.

Next comes a better idea. You understand that myFunkyLibrary is going to change again and again.

var myFunkyLibrary = (function() {
    var _prop1 = ''; // private property - can not be accessed externally
    // function meant for internal usage - this is truly private now
    var _fn2 = function(){};

    return {
        prop2: 'some value here', // public property
        fn = function(){} // public function of the library
    };
})();

This looks better. To change the library name, you just make the change at one place. You also get the added benefit of true private properties and functions. Also for namesake, you impress the kids on the block with the “module pattern” term.

Cool! Off you release your new piece of code.

After a few days, you guessed it right. You are not very good at naming things. Some dudes are just not okay proliferating their code with myFunkyLibrary.this and myFunkyLibrary.that.

Name it whatever you feel like but I still think myFunkyLibrary is a pretty awesome name. So you go:

var myFunkyLibrary = function() {
    var _prop1 = ''; // private property - can not be accessed externally
    // function meant for internal usage - this is truly private now
    var _fn2 = function(){};

    this.prop2 = 'some value here'; // a public property.
    this.fn = function(){}; // public function of the library
};

With this, you basically allowed any user of your library the freedom to dynamically namespace/use your library with any name he wants, like this:

// their own object literal
var $externalLib_Proto = {};

// aliasing your library to his object
myFunkyLibrary.call($externalLib_Proto);

// calling your library
$externalLib_Proto.fn();

This is what we term as dynamic namespacing. We wrapped the entire library and used this as a stand-in for the execution context. The user of the library gets to choose what that context is by invoking the library on an object literal of their choice using call(). Nice and simple!

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


My Battle Tested Recommendations

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.