[SOLUCIONADO] Dudas Javascript

[zerokilled]

dicha expresión es un shorthand de un if/else. el operador OR evalúa una expresión u otra dependiendo del boolean que genera la primera expresión. es decir, en la sentencia window.app || (window.app = Object()), la primera expresión es window.app. dicha expresión no hace nada por si sola. cuando se evalua a boolean (debido al operador OR lógico), si es true, entonces devuelve el resultado de esa expresión. pero si es false, entonces se evalúa la segunda expresión y devuelve el resultado. es exactamente lo mismo que if (!window.app) { window.app = Object(); }. una forma más fácil de entenderlo sería, si no existe algo, entonces hacer tal cosa.

de forma similar sucede con el operador lógico AND, pero de forma contraria. si existe algo, entonces hacer esto. ejemplo, self.alert && self.alert('foo').

[Carlangueitor]

Es bastante sencillo, vamos por partes:

Primero, el operador OR funciona de cierta manera, cuando se usa en variables que no son boleanos, devuelve el primer valor si este se evalúa como verdadero, de cualquier otra manera regresa el segundo:

Código Javascript:

var num = 0 || 1;  // num == 1
var num = 36 || 0;  // num == 36
var text = "" || "Hola!";  // text == "Hola"
var text = undefined || "Hola!"; // text == "Hola"
 

Esto nos permite, en este caso tener un mismo namespace dentro de varios archivos, solo verificas si existe dentro del scope global y usarlo, o crear el namespace.

Código Javascript:

var App = App || {};  // Si App está definido, devuelve App. si no, crea un nuevo objeto literal
 

Si tienes un módulo bastante pequeño puedes omitir eso y hacer directamente un objeto literal:

Código Javascript:

var App = {}
 

El problema con esto es que carece de encapsulación, no puedes tener variables y/o funciones privadas, por ejempo:

Código Javascript:

var App = App || {};
 
App._privateValue = 0;
 
App.method = function() {
    /* Magic Here */
    console.log("Ponies and Rainbows: " +  App._privateValue + 10); 
};
 

_privateValue es totalmente accesible, lo cuál no siempre queremos (y no es cuestión de seguridad, como dije antes, es encapsulación).

Entonces probemos otra forma, partiendo de que las variables declaradas de una función son de ámbito local, hacemos la declaración de nuestro namespace en una función que se auto invoca, y entonces podemos tener mejor encapsulación y exponer solo lo necesario:

Código Javascript:

(function (window) {
    var app = (function () {
        return window.app || (window.app = Object());
    })();
 
    var privateMethod = function() {
        return 0;
    };
 
    app.method = function () {
        /* Magic Here */
        console.log("Ponies and Rainbows: " + privateMethod()); 
    };
 
})(window);
 
app.privateMethod();  // Manda error;
 

Creo que eso es a grandes rasgos como funciona.


Saludos

[Italico76]

@zerokilled y @Carlangueitor : les agradezco mucho

@Carlangueitor : super-clara la explicacion ... lo explicado se entendio perfecto pero tocaste otro tema que me tiene confundido: por que usastes una funciones auto-invocadas ?


No hubiera sido lo mismo con funciones no-autoejecutables ? o fue solo para ahorrarte escribir un function call ?


Relacionado con esto, muchas veces me pasa que escribo una funcion auto-invocada y lo que me devuelve es el codigo fuente de la funcion sin evaluar.... nunca doy en el clavo de por que y me toca copy & paste de una funcion auto-invocada bien escrita y me quedo con la "vena" de saber porque me paso esto

[Carlangueitor]

Es justamente para no ensuciar el namespace global, y todo lo que conlleva:

Código Javascript:

var initApp = function (window) {
};
 
initApp();
 

Imagina que pasa cuando tienes varios archivos.

Saludos