Fallstricke von IIFE in JavaScript

Betrachten wir zwei Codeausschnitte.

Der erste:

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

console.log(result);

Der zweite:

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

console.log(result);

Diese beiden Codeausschnitte sind praktisch identisch, aber wenn man sie ausführt, wird das Ergebnis unterschiedlich sein. Der erste Code gibt die Zahl 3 in der Konsole aus, der zweite - die Zahl 1.

Warum dieser Unterschied: Es liegt alles daran, dass in einem Fall in der ersten Zeile am Ende kein Semikolon steht, und im zweiten Fall - schon.

Sie mögen fragen: Wie kann das sein, denn in JavaScript ist das Semikolon am Ende eines Befehls nicht obligatorisch! Tatsächlich ist das nicht ganz richtig. Lassen Sie uns herausfinden, was tatsächlich passiert.

Der erste Code kann so umgeschrieben werden:

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

console.log(result); // gibt 3 aus

Jetzt wird sofort offensichtlich, dass zur Eins das Ergebnis des sofortigen Aufrufs der Funktion addiert wird, also 2. Daher wird das Endergebnis 3 sein.

Wenn man jedoch nach der Eins ein Semikolon setzt, wird der Code vom Interpreter anders aufgefasst:

// Erster Befehl:
let result = 1;

// Zweiter Befehl:
+function() {
	return 2;
}();

// Dritter Befehl:
console.log(result); // gibt 1 aus

Das heißt, die Zuweisung an die Variable und der sofortige Aufruf der Funktion werden zu unterschiedlichen Befehlen. Und alles wegen des Vorhandenseins eines Semikolons!

Es stellt sich heraus, dass in diesem Fall der sofortige Aufruf der Funktion im Grunde nichts macht - er gibt einfach die Zahl 2 ins Leere zurück, was keinerlei Auswirkung auf die Variable result hat.

Lassen Sie uns dann klären, warum wir überhaupt auf Semikolons in JavaScript verzichten können. Nehmen wir an, wir haben einen Code ohne Semikolons:

let result = 1 // in result wird 1 geschrieben
let test = 2   // in test wird 2 geschrieben

Er funktioniert korrekt, da der Interpreter am Ende jeder Zeile selbst ein Semikolon gesetzt hat.

Aber sehen Sie sich diesen Code an:

let result = 1
+ 2; // in result wird 3 geschrieben

Jetzt wird am Ende der ersten Zeile kein Semikolon automatisch gesetzt, da der Interpreter versteht, dass der Befehl in der zweiten Zeile ein Teil des Befehls aus der ersten Zeile ist.

Wenn wir jedoch selbst ein Semikolon setzen - wird das Ergebnis ein ganz anderes sein:

let result = 1; // in result wird 1 geschrieben
+ 2; // Der Befehl macht nichts, aber es wird auch kein Fehler auftreten

Es stellt sich heraus, dass der Interpreter selbst nur dann ein Semikolon setzt, wenn der folgende Befehl kein Teil des vorherigen ist.

Und jetzt sehen Sie sich diesen Code an:

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

console.log(result);

Tatsächlich ist die zweite Zeile - einfach die Fortsetzung des Befehls aus der ersten Zeile und der Interpreter setzt kein Semikolon automatisch. Genau deshalb, wenn wir selbst ein Semikolon am Ende der ersten Zeile schreiben - wird das Ergebnis ein völlig anderes sein. Das zeigt, dass es am besten ist, immer ein Semikolon an den erforderlichen Stellen zu setzen, um Probleme zu vermeiden.