Pułapki IIFE w JavaScript

Przyjrzyjmy się dwóm fragmentom kodu.

Pierwszy:

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

console.log(result);

Drugi:

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

console.log(result);

Te dwa fragmenty kodu są prawie identyczne, ale jeśli je uruchomimy - wynik będzie inny. Pierwszy kod wypisze w konsoli liczbę 3, a drugi - liczbę 1.

Dlaczego jest taka różnica: chodzi o to, że w jednym przypadku w pierwszej linii kodu na końcu brakuje średnika, a w drugim przypadku - jest.

Możesz zapytać: jak to możliwe, przecież w JavaScript średnik na końcu komendy nie jest obowiązkowy! W rzeczywistości nie jest to do końca prawda. Dowiedzmy się, co tak naprawdę się dzieje.

Pierwszy kod można przepisać tak:

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

console.log(result); // wypisze 3

Teraz od razu staje się oczywiste, że do jedynki dodawany jest wynik wywołania funkcji od razu, czyli 2. Dlatego ostateczny wynik będzie wynosił 3.

Jeśli jednak po jedynce postawimy średnik, kod zostanie zinterpretowany inaczej:

// Pierwsza komenda:
let result = 1;

// Druga komenda:
+function() {
	return 2;
}();

// Trzecia komenda:
console.log(result); // wypisze 1

Czyli przypisanie do zmiennej i wywołanie funkcji od razu staną się różnymi komendami. A wszystko z powodu obecności średnika!

Okazuje się, że w tym przypadku wywołanie funkcji od razu właściwie nic nie robi - po prostu zwraca liczbę 2 w próżnię, która nie ma żadnego wpływu na zmienną result.

Dowiedzmy się zatem, dlaczego w ogóle możemy nie pisać średnika w JavaScript. Załóżmy, że mamy taki kod bez średników:

let result = 1 // do result zostanie zapisane 1
let test = 2   // do test zostanie zapisane 2

Działa on poprawnie, ponieważ interpreter sam wstawił na końcu każdej linii średnik.

Ale spójrz na taki kod:

let result = 1
+ 2; // do result zostanie zapisane 3

Teraz średnik na końcu pierwszej linii nie zostanie wstawiony automatycznie, ponieważ interpreter rozumie, że komenda w drugiej linii jest częścią komendy z pierwszej linii.

Ale jeśli sami postawimy średnik - wynik będzie zupełnie inny:

let result = 1; // do result zostanie zapisane 1
+ 2; // komenda nic nie robi, ale nie będzie też błędu

Okazuje się, że interpreter sam stawia średnik tylko wtedy, gdy następna komenda nie jest częścią poprzedniej.

A teraz spójrz na ten kod:

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

console.log(result);

Rzeczywiście, druga linia - to po prostu kontynuacja komendy z pierwszej linii i interpreter nie stawia średnika automatycznie. Właśnie dlatego, jeśli sami napiszemy średnik na końcu pierwszej linii - wynik będzie zupełnie inny. To mówi nam, że najlepiej zawsze stawiać średnik we właściwych miejscach, aby uniknąć problemów.