Az IIFE rejtett buktatói a JavaScriptben

Nézzünk meg két kódrészletet.

Az első:

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

console.log(result);

A második:

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

console.log(result);

Ez a két kódrészlet szinte teljesen megegyezik, de ha futtatjuk őket, az eredmény különböző lesz. Az első kód a 3 számot írja a konzolra, míg a második a 1 számot.

Miért van ez a különbség: minden abban rejlik, hogy az egyik esetben az első sor végén nincs pontosvessző, míg a második esetben van.

Kérdezheted: hogy lehet ez, hiszen a JavaScriptben a pontosvessző a parancs végén nem kötelességi! Valójában ez nem teljesen így van. Derítsük ki, mi is történik valójában.

Az első kód átírható így:

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

console.log(result); // kiírja a 3-at

Most már nyilvánvalóvá válik, hogy az egyeshez hozzáadódik a függvény azonnali meghívásának eredménye, azaz a 2. Ezért a végeredmény 3 lesz.

Ha viszont az egyes után pontosvesszőt teszünk, akkor az értelmező máshogy fogja fel a kódot:

// Első parancs:
let result = 1;

// Második parancs:
+function() {
	return 2;
}();

// Harmadik parancs:
console.log(result); // kiírja az 1-et

Vagyis a változóhoz való hozzárendelés és a függvény azonnali meghívása külön parancsok lesznek. És mindez a pontosvessző jelenléte miatt!

Kiderül, hogy ebben az esetben a függvény azonnali meghívása egyáltalán semmit sem csinál - egyszerűen a semmibe visszaadja a 2 számot, amely semmilyen módon nem befolyásolja a result változót.

Akkor derítsük ki, miért hagyhatjuk el egyáltalán a pontosvesszőt a JavaScriptben. Legyen egy ilyen kódunk pontosvesszők nélkül:

let result = 1 // a result-ba 1 kerül
let test = 2   // a test-be 2 kerül

Ez helyesen működik, mivel az értelmező magától elhelyezte a sorok végén a pontosvesszőt.

de nézd meg ezt a kódot:

let result = 1
+ 2; // a result-ba 3 kerül

Most az első sor végére nem kerül automatikusan pontosvessző, mert az értelmező megérti, hogy a második sor parancsa az első sor parancsának a része.

De ha mi magunk teszünk pontosvesszőt - az eredmény teljesen más lesz:

let result = 1; // a result-ba 1 kerül
+ 2; // a parancs nem csinál semmit, de hiba sem lesz

Kiderül, hogy az értelmező csak akkor helyez el pontosvesszőt magától, ha a következő parancs nem része az előzőnek.

És most nézd meg ezt a kódot:

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

console.log(result);

Valóban, a második sor - egyszerűen folytatása az első sor parancsának, és az értelmező nem helyez oda automatikusan pontosvesszőt. Pontosan ezért, ha mi magunk írunk pontosvesszőt az első sor végére - az eredmény teljesen más lesz. Ez azt jelenti, hogy a legjobb mindig elhelyezni a pontosvesszőt a szükséges helyeken, a problémák elkerülése érdekében.