IIFE spąstai JavaScript

Panagrinėkime du kodo pavyzdžius.

Pirmasis:

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

console.log(result);

Antrasis:

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

console.log(result);

Šie du kodo pavyzdžiai yra beveik identiški, bet paleidus juos - rezultatas skirsis. Pirmasis kodas atspausdins konsolėje skaičių 3, o antrasis - skaičių 1.

Kodėl atsirado toks skirtumas: visa tai dėl to, kad vienu atveju pirmosios eilutės pabaigoje nėra kabliataškio, o antruoju atveju - yra.

Galite paklausti: kaip gi taip, juk JavaScript kabliataškis komandos pabaigoje nėra privalomas! Tiesą sakant, tai nėra visiškai taip. Išsiaiškinkime, kas iš tikrųjų vyksta.

Pirmąjį kodą galima perrašyti taip:

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

console.log(result); // atspausdins 3

Dabar iškart tampa akivaizdu, kad prie vieneto pridedamas funkcijos iškart vykdyto rezultatas, tai yra 2. Todėl galutinis rezultatas bus 3.

Jei po vieneto dedamas kabliataškis, kodas bus interpretuojamas kitaip:

// Pirma komanda:
let result = 1;

// Antra komanda:
+function() {
	return 2;
}();

// Trečia komanda:
console.log(result); // atspausdins 1

Tai yra, priskyrimas į kintamąjį ir funkcijos iškart vykdymas taps skirtingomis komandomis. Ir vis dėl kabliataškio buvimo!

Pasirodo, kad šiuo atveju funkcijos iškart vykdymas nieko nepadaro - tiesiog į nieką grąžina skaičių 2, kuris niekaip neveikia kintamojo result.

Tada išsiaiškinkime, kodėl apskritai galime nerašyti kabliataškio JavaScript. Tarkime, turime tokį kodą be kabliataškių:

let result = 1 // į result įrašomas 1
let test = 2   // į test įrašomas 2

Jis veikia korektiškai, nes interpretatorius patys pastatė kiekvienos eilutės pabaigoje kabliataškį.

Bet pažvelkite į tokį kodą:

let result = 1
+ 2; // į result įrašomas 3

Dabar kabliataškis pirmosios eilutės pabaigoje nebus automatiškai dedamas, nes interpretatorius suvokia, kad antrosios eilutės komanda - tai pirmosios eilutės komandos dalis.

Bet jei mes patys pastatysime kabliataškį - rezultatas bus visiškai kitoks:

let result = 1; // į result įrašomas 1
+ 2; // komanda nieko nedaro, bet ir klaidos nebus

Pasirodo, kad interpretatorius pats deda kabliataškį, tik jei kita komanda nėra ankstesnės dalis.

O dabar pažvelkite į šį kodą:

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

console.log(result);

Iš tiesų, antroji eilutė - tiesiog tęsinys pirmosios eilutės komandos ir interpretatorius nededa kabliataškio automatiškai. Būtent todėl, jei mes patys parašysime kabliataškį pirmosios eilutės pabaigoje - rezultatas bus visiškai kitoks. Tai rodo, kad geriausia visada dėti kabliataškį reikiamose vietose, kad išvengtumėte problemų.