Veamos qué son los Namespace cuando se trata de crear aplicaciones y algunos de los beneficios de usar un Namespacing privado.

¿Qué es un Namespace?

En pocas palabras, un Namespace es una sección de código que tiene su propio espacio. Cuando comienzas a escribir aplicaciones con JS, generalmente escribes el códgio y lo ejecutas. Esto coloca todo el código en lo que conocemos como global namespace, que contiene todo el código en el que estas trabajando.

Sin embargo, si mantienes todo tu código en el global namespace, puedes tener conflictos, por ejemplo en el nombre de las variables. Se presenta principalmente en aplicaciones grandes .

Veamos un ejemplo de porque usar global namespace para desarrollor aplicaciones es una mala idea.

Digamos que tenemos un juego que realiza un seguimiento de los puntos que tiene el jugador:

var puntos = 0;

Muchos juegos registran puntos para agregar una ventaja al juego. Simplemente escribiendo esta linea de código, hemos creado una variable llamada puntos que puede llevar el total de puntos ganados por un usuario.

Y eso está muy bien, pero digamos que tenemos un usuario avanzado jugando. Este usuario sabe cómo mirar el código fuente de nuestra página web, por lo que esta persona echa un vistazo al código y se da cuenta que la variable puntos esta seteada en el global namespace. ¡Una sonrisa malvada se dibuja en sus rostros mientras contemplan los puntos que pueden lograr! Deciden que no quieren esperar para vencer a algunos malos, o aplastar algunos hongos, o lo que sea necesario para obtener un montón de puntos. ¡Quieren sus puntos ahora! Bueno, ¿Comó suena un billón de billones de puntos? Entonces, abren la consola en el navegador y simplemente escribe:

puntos = 34750925489459203859095480917458059034;

Una vez el usuario presiona Enter, la variable de puntos se actualiza en el juego. Ahora, el usuario tiene una cantidad de puntos enorme, y probablemente poco realistico en el juego, y puede presumir ante sus amigos que nadie puede superar su increíble puntiación.

¿Cómo evitamos que esto ocurra? Aquí es donde entran en juego private namespaces

Private Namespaces

Private namespaces permiten a los desarrolladores poner su código en secciones(or namespaces). Estas secciones operan de forma independiente entre sí, pero aún pueden leer y escribir desde el global namespace.

Para visualizar esto en términos más simples usemos un escenario de la vida real, digamos que estás trabajando en un edificio de oficinas. Tienes tu propia oficina y puedes ver que el resto tambien tienen la suya. Cada oficina está cerrada con llave y solo el dueño de la ofician tiene la llave. Supongamos que tiene algún tipo de super cerradura que hace que su oficina sea impenetrable para cualquier otra persona en el edificio.
Consideremos el edificio como el global namespace. y cada oficina como un private namespaces. No tienes acceso a la oficina de nadie más ni ellos tienen acceso a la tuya. Pero, cada uno tiene acceso al resto del edificio, ya sea para tomar café, tomar un refrigerio, etc. Cada uno puede tomar algo del global namespace(crear/modificar algo allí), pero no puenen crear/modificar/tomar nada de las oficinas de los demás; solo pueden crear/modificar/tomar de su private namespaces/oficina privada.

Conseguir un private namespace

Entonces, ¿cómo logramos conseguir este private namespace en JavaScript? Usando una función anónima auto-ejecutable.

Revisemos el ejemplo anterior pero separando en un private namespace:

//La forma más común en que verás una función anónima de ejecución automática
(function () {
    var puntos = 0;
})();

//Esta es solo una de las muchas formas más alternativas de usar una función anónima de ejecución automática
/*
!function () {
    var puntos = 0;
}();
*/

Ahora, cuando el usuario llegue a la página, no podrá abrir la consola en su navegador y cambiar el valor de la variable puntos como desee. ¡Increíble!

Namespace y la interacción con document

El código anterior fue solo uno de los usos de anonymous self-executing function para darle al código su propio private namespace. Tengamos en cuenta que los namespaces solo afectan al código JS (varables/arreglos/objectos/etc), no al código que pertenece al document en sí.

Cualquier código dentro de un namespace todavía tiene el mismo acceso al docmuento HTML y CSS, coomo lo haría normalmente en el global namespace. Veamos los siguientes dos ejemplos de código. Ambos realizan la misma funcionalidad y ninguno es más beneficioso ni más eficiente que el otro.

<script type="text/javascript">
    (function () {
        document.querySelector('body').style.background = 'azul';
    })();
</script>

Es igual a

<script type="text/javascript">
    document.querySelector('body').style.background = 'azul';
</script>

Tenga en cuenta que esta es solo una forma de utilizar espacios de nombres en aplicaciones JavaScript. Adapta tu código a la situación que se este presentando.

Traducido del artículo How to Use Anonymous Functions for Private Namespacing in Your JavaScript Apps