switch - undefined javascript error

¿Por qué var x=x=x ||{} más completo que var x=x ||{}?

Question

En mi esfuerzo por escribir código JavaScript limpio como principiante, recientemente estuve leyendo este artículo sobre el espacio de nombres en JavaScript cuando me encontré con este párrafo:

El código en la parte superior del siguiente ejemplo demuestra las diferentes maneras en que puede verificar si ya existe una variable (espacio de nombres de objeto) antes de definirlo. Por lo general, verá a los desarrolladores usar la Opción 1, sin embargo, las Opciones 3 y 5 se pueden considerar más exhaustivas y la Opción 4 se considera una buena práctica recomendada.

// This doesn''t check for existence of ''myApplication'' in
// the global namespace. Bad practice as you can easily
// clobber an existing variable/namespace with the same name
var myApplication = {};
/*
The following options *do* check for variable/namespace existence.
If already defined, we use that instance, otherwise we assign a new
object literal to myApplication.
Option 1: var myApplication = myApplication || {};
Option 2 if(!MyApplication) MyApplication = {};
Option 3: var myApplication = myApplication = myApplication || {}
Option 4: myApplication || (myApplication = {});
Option 5: var myApplication = myApplication === undefined ? {} : myApplication;
*/

La opción 1 es ciertamente la que he visto la mayor parte del tiempo, y la entiendo bien.

La opción 2 está bien, pero parece carecer de una var myApplication antemano o de if(!window.myApplication) contrario, si myApplication no está en el alcance global, la condición if(!myApplication) arrojaría un error, ¿no?

La opción 3 es con la que tengo problemas: entiendo que la aplicación myApplication = myApplication se ejecuta primero, con myApplication en el ámbito global (debido a la var al principio). Mi problema es que no puedo pensar en un caso donde esta opción haga algo más que la opción 1.

La opción 4 en mis ojos hubiera sido mejor escrita window.myApplication || (myApplication = {}) window.myApplication || (myApplication = {}) para evitar arrojar un error si myApplication no se encuentra en el alcance global.

La opción 5 excluye los valores de falso-y que undefined sean undefined pero ¿es una buena idea? Si myApplication es una cadena vacía, es probable que el resto del código falle, ¿no es así?

¿Podría alguien arrojar algo de luz sobre las diferencias entre las diferentes opciones y, en particular, explicar por qué la opción 3 se describe como más completa?

Answer 1

Si el artículo afirma que la Opción 3 es "más completa", es incorrecta. No hay ningún punto en el medio de esa cadena de asignación en absoluto.

¿Podría alguien arrojar algo de luz sobre las diferencias entre las diferentes opciones y, en particular, explicar por qué la opción 3 se describe como más completa?

Primero, una advertencia: aquí en 2018, probablemente no quiera usar ninguno de estos. En su lugar, utilice módulos adecuados, ya sea a través de una de las varias sintaxis de definición de módulos ( AMD , CommonJS , RequireJS ) con una herramienta relevante, o mediante módulos ES2015 + con import y export (y probablemente una herramienta relevante como Babel y quizás Webpack o Browserify , aunque las versiones actuales de Chrome, Safari y Edge admiten módulos de forma nativa, y Firefox también lo hace actualmente detrás de una bandera).

¿Por qué var x = x = x || {} var x = x = x || {} más completo que var x = x || {} var x = x || {} ?

No lo es

La opción 2 está bien, pero parece carecer de una var myApplication antemano o de if(!window.myApplication) contrario, si myApplication no está en el alcance global, la condición if(!myApplication) arrojaría un error, ¿no?

Sí. (Suponiendo que la producción se produce en un ámbito global. Si no se trata de un alcance global y hay una aplicación myApplication dentro del alcance en cualquier lugar de la cadena de alcance actual, no se lanzará porque myApplication no será un símbolo no resuelto).

La opción 3 es con la que tengo problemas: entiendo que la aplicación myApplication = myApplication se ejecuta primero, con myApplication en el ámbito global (debido a la var al principio). Mi problema es que no puedo pensar en un caso donde esta opción haga algo más que la opción 1.

No, si tienes

var myApplication = myApplication = myApplication || {}

este es el orden en que suceden las cosas:

1. var myApplication crea el global si no existe, lo deja intacto si lo hace
2. myApplication || {} myApplication || {} se evalúa y toma el valor en myApplication (si es verdad) o {} (si no es así); llamemos a ese value1
3. myApplication = value1 (el que está en el medio) se realiza y el resultado es value1
4. myApplication = value1 (el de la izquierda) se realiza nuevamente sin una buena razón

La opción 4 en mis ojos hubiera sido mejor escrita window.myApplication || (myApplication = {}) window.myApplication || (myApplication = {}) para evitar arrojar un error si myApplication no se encuentra en el alcance global.

En efecto.

La opción 5 excluye los valores de falso-y que undefined sean undefined pero ¿es una buena idea? Si myApplication es una cadena vacía, es probable que el resto del código falle, ¿no es así?

Sí.