Подводни камъни на IIFE в JavaScript

Нека разгледаме два кодови фрагмента.

Първият:

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

console.log(result);

Вторият:

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

console.log(result);

Тези два кодови фрагмента са почти еднакви, но ако се стартират - резултатът ще бъде различен. Първият код ще изведе в конзолата числото 3, а вторият - числото 1.

Защо се получава такава разлика: всичко се свежда до това, че в единия случай на първия ред на кода в края липсва точка и запетая, а във втория случай - присъства.

Може да попитате: как така, все пак в JavaScript точката и запетаята в края на командата не е задължителна! Всъщност това не е съвсем така. Нека разберем какво всъщност се случва.

Първият код може да се пренапише ето така:

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

console.log(result); // ще изведе 3

Сега веднага става очевидно, че към единицата се добавя резултатът от извикването на функцията на място, тоест 2. Затова крайният резултат ще бъде 3.

Ако обаче след единицата се постави точка и запетая, кодът ще бъде възприет от интерпретатора по различен начин:

// Първа команда:
let result = 1;

// Втора команда:
+function() {
	return 2;
}();

// Трета команда:
console.log(result); // ще изведе 1

Тоест присвояването в променливата и извикването на функцията на място ще станат различни команди. И всичко това заради наличието на точка и запетая!

Оказва се, че в този случай извикването на функцията на място въобще не прави нищо - просто връща числото 2 в нищото, което не влияе по никакъв начин на променливата result.

Тогава нека разберем защо изобщо можем да не пишем точка и запетая в JavaScript. Нека имаме такъв код без точки и запетаи:

let result = 1 // в result ще се запише 1
let test = 2   // в test ще се запише 2

Той работи коректно, тъй като интерпретаторът сам постави в края на всеки ред точка и запетая.

Но погледнете такъв код:

let result = 1
+ 2; // в result ще се запише 3

Сега точка и запетая в края на първия ред няма да се постави автоматично, тъй като интерпретаторът разбира, че командата на втория ред - това е част от командата на първия ред.

Но ако ние сами поставим точка и запетая - резултатът ще бъде съвсем друг:

let result = 1; // в result ще се запише 1
+ 2; // командата не прави нищо, но и няма да даде грешка

Оказва се, че интерпретаторът сам поставя точка и запетая, само ако следващата команда не е част от предишната.

А сега погледнете този код:

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

console.log(result);

Наистина, вторият ред - просто продължение на командата от първия ред и интерпретаторът не поставя точка и запетая автоматично. Exactly затова, ако ние сами напишем точка и запетая в края на първия ред - резултатът ще бъде съвсем друг. Това говори, че най-добре е винаги да се поставя точка и запетая на нужните места, за да се избегнат проблеми.