Trampas de las IIFE en JavaScript

Consideremos dos fragmentos de código.

El primero:

let result = 1
+function() {
	return 2;
}();

console.log(result);

El segundo:

let result = 1;
+function() {
	return 2;
}();

console.log(result);

Estos dos fragmentos de código son prácticamente idénticos, pero si se ejecutan, el resultado será diferente. El primer código mostrará en la consola el número 3, y el segundo - el número 1.

Por qué hay tanta diferencia: todo se debe a que en un caso al final de la primera línea de código falta el punto y coma, y en el segundo caso - está presente.

Puedes preguntar: ¿cómo es posible, si en JavaScript el punto y coma al final del comando no es obligatorio! En realidad, esto no es del todo cierto. Averigüemos qué está sucediendo realmente.

El primer código se puede reescribir así:

let result = 1 + function() {
	return 2;
}();

console.log(result); // mostrará 3

Ahora resulta obvio que a la unidad se le suma el resultado de la invocación de la función inmediatamente, es decir, 2. Por lo tanto, el resultado final será 3.

Sin embargo, si se coloca un punto y coma después de la unidad, el código será interpretado de manera diferente:

// Primer comando:
let result = 1;

// Segundo comando:
+function() {
	return 2;
}();

// Tercer comando:
console.log(result); // mostrará 1

Es decir, la asignación a la variable y la invocación de la función inmediatamente se convertirán en comandos diferentes. ¡Y todo por la presencia del punto y coma!

Resulta que en este caso la invocación de la función inmediatamente no hace nada - simplemente devuelve el número 2 a la nada, que no afecta de ninguna manera a la variable result.

Entonces, averigüemos por qué вообще podemos no escribir punto y coma en JavaScript. Supongamos que tenemos este código sin puntos y comas:

let result = 1 // en result se escribirá 1
let test = 2   // en test se escribirá 2

Funciona correctamente, ya que el intérprete colocó automáticamente un punto y coma al final de cada línea.

Pero observe este código:

let result = 1
+ 2; // en result se escribirá 3

Ahora el punto y coma al final de la primera línea no se colocará automáticamente, ya que el intérprete comprende que el comando de la segunda línea es parte del comando de la primera línea.

Pero si nosotros mismos colocamos el punto y coma, el resultado será completamente diferente:

let result = 1; // en result se escribirá 1
+ 2; // el comando no hace nada, pero tampoco habrá error

Resulta que el intérprete solo coloca el punto y coma automáticamente si el siguiente comando no forma parte del anterior.

Y ahora observe este código:

let result = 1
+function() {
	return 2;
}();

console.log(result);

Efectivamente, la segunda línea es simplemente la continuación del comando de la primera línea y el intérprete no coloca el punto y coma automáticamente. Precisamente por eso, si nosotros mismos escribimos el punto y coma al final de la primera línea, el resultado será completamente diferente. Esto indica que es mejor siempre colocar el punto y coma en los lugares necesarios, para evitar problemas.