Valkuilen van IIFE in JavaScript

Laten we twee stukjes code bekijken.

De eerste:

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

console.log(result);

De tweede:

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

console.log(result);

Deze twee stukjes code zijn bijna identiek, maar als je ze uitvoert, zal het resultaat verschillen. De eerste code zal het getal 3 naar de console loggen, terwijl de tweede - het getal 1.

Waarom is er zo'n verschil: het komt allemaal neer op het feit dat in het ene geval aan het einde van de eerste regel geen puntkomma staat, en in het andere geval - wel.

Je zou kunnen vragen: hoe kan dat, want in JavaScript is de puntkomma aan het einde van een statement niet verplicht! Eigenlijk is dat niet helemaal waar. Laten we eens uitzoeken wat er werkelijk gebeurt.

De eerste code kan als volgt worden herschreven:

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

console.log(result); // logt 3

Nu wordt meteen duidelijk dat bij de één het resultaat van de directe functieaanroep wordt opgeteld, dat wil zeggen 2. Daarom zal het eindresultaat 3 zijn.

Als je echter een puntkomma achter de één plaatst, zal de code anders worden geïnterpreteerd:

// Eerste statement:
let result = 1;

// Tweede statement:
+function() {
	return 2;
}();

// Derde statement:
console.log(result); // logt 1

Dat wil zeggen, de toewijzing aan de variabele en de directe functieaanroep worden verschillende statements. En allemaal vanwege de aanwezigheid van de puntkomma!

Blijkbaar doet de directe functieaanroep in dit geval helemaal niets - hij retourneert gewoon het getal 2 in het niets, wat geen invloed heeft op de variabele result.

Laten we dan eens uitzoeken waarom we überhaupt geen puntkomma hoeven te schrijven in JavaScript. Stel dat we code hebben zonder puntkomma's:

let result = 1 // in result wordt 1 geschreven
let test = 2   // in test wordt 2 geschreven

Hij werkt correct, omdat de interpreter self aan het einde van elke regel een puntkomma heeft geplaatst.

Maar kijk naar deze code:

let result = 1
+ 2; // in result wordt 3 geschreven

Nu wordt de puntkomma aan het einde van de eerste regel niet automatisch geplaatst, omdat de interpreter begrijpt dat het statement van de tweede regel deel uitmaakt van het statement van de eerste regel.

Maar als we zelf een puntkomma plaatsen - zal het resultaat heel anders zijn:

let result = 1; // in result wordt 1 geschreven
+ 2; // statement doet niets, maar er zal ook geen fout zijn

Blijkbaar plaatst de interpreter zelf een puntkomma, alleen als het volgende statement geen deel uitmaakt van het vorige.

En kijk nu naar deze code:

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

console.log(result);

Inderdaad, de tweede regel is simpelweg een voortzetting van het statement van de eerste regel en de interpreter plaatst geen puntkomma automatisch. Precies daarom, als we zelf een puntkomma aan het einde van de eerste regel schrijven - zal het resultaat heel anders zijn. Dit geeft aan dat het het beste is om altijd een puntkomma op de juiste plaatsen te zetten, om problemen te voorkomen.