Nowy temat o języku JavaScript 🔥! Pokażę Ci co w języku JavaScript oznacza skrót IIFE oraz jak rozumieć jego znaczenie w kodzie źródłowym 👍. Zapraszam 😄!
OTO CO OZNACZA IIFE W JĘZYKU JAVASCRIPT!
Najpierw przybliżę znaczenie samego skrótu, aby potem móc pokazać występowanie w kodzie źródłowym.
Co oznacza IIFE w języku JavaScript?
IIFE w języku JavaScript oznacza "Immediately Invoked Function Expression", co tłumaczone jest jako "samowywołująca się funkcja" 🚀. I to już samo w sobie wyjaśnia co to takiego 💡. Jest to konstrukcja polegająca na "włożeniu" definicji funkcji bezpośrednio w miejsce jej wywołania, dokładnie tak, jakbyśmy wywoływali funkcję o treści zdefiniowanej w innym miejscu.
Zapis ten pozwala nam na automatyczne wywołanie funkcji natychmiast po jej przetworzeniu przez interpreter JS 💥! Z praktycznego punktu widzenia, nie różni się niczym od standardowej formy zapisu, w której to zdefiniowalibyśmy funkcję na samej górze i zaraz po niej wstawili wywołanie tej samej funkcji 😊!
W tym miejscu idealnie jest postawić sobie pytanie po co w takim razie się tego używa 😁.
Do czego służy IIFE w języku JavaScript?
Samowywołująca się funkcja IIFE nosi za sobą jeden główny powód: hermetyzacja składowych (ograniczenie widoczności zmiennych i funkcji poza blokiem kodu, w którym się znajdują).
Gdy piszemy w sposób tradycyjny zmienne i funkcje, to są one widoczne na przestrzeni całej przeglądarki 👀. Każdy inny skrypt może uzyskać do nich dostęp, jak również my sami po przejściu do konsoli programisty w przeglądarce (nazwa i dostęp różni się na każdej z przeglądarek) ⚠️. Globalna widoczność konkretnych danych nie należy do dobrych praktyk, ponieważ niesie za sobą ryzyko modyfikacji z zewnątrz, co w konsekwencji może doprowadzić do utraty stabilności naszej aplikacji ❌.
Dlatego stosuje się IIFE, aby "opakować" wszystkie składowe w blok kodu, który zapewni prywatność, bo działa dokładnie jak blok funkcji, w którym wszystkie zmienne i funkcje stają się lokalne (niedostępne dla świata zewnętrznego) ✅.
To wszystkie informacje teoretyczne jakie chciałem przybliżyć. Przejdźmy teraz do kodu źródłowego 🔍!
Jak utworzyć IIFE w języku JavaScript?
W JavaScript, IIFE tworzymy poprzez połączenie zapisów definicji funkcji i jej wywołania, pisząc w następującej formie 👇:
(function() {
// instrukcje
})();Najlepiej będzie wyjaśnić tę postać porównując to do bardziej powszechnego zapisu wywołania funkcji. Porównaj sobie powyższą formę z następującą 👇:
doSomething();Teraz będzie lepiej tłumaczyć 🙂.
Zamiast nazwy funkcji zdefiniowanej w innym miejscu w kodzie, mamy samą treść funkcji objętą w nawias, ponieważ musi to zostać przetworzone jako pojedyncze wyrażenie. W środku jest nic innego jak wyrażenie lambda, czyli funkcja anonimowa "wpleciona" w miejsce nazwy funkcji 🌟.
Reszta elementów jest taka sama, czyli para nawiasów okrągłych i średnik na końcu. A ponieważ nawiasy okrągłe są oznaczeniem wywołania funkcji, cała treść zostanie wykonana natychmiast po jej przetworzeniu przez interpreter. Dlatego jest to funkcja, która wywoła się samoistnie 💡!
Możemy do środka bloku kodu dodawać bez problemu zmienne i inne funkcje - wszystko działa tak samo, jak przy pisaniu tradycyjnym. Jedyną różnicą jest brak dostępu z zewnątrz i w ten sposób zapewniamy bezpieczeństwo wszystkich danych 👍.
 |
Samowywołująca się funkcja w języku JavaScript (znana pod skrótem IIFE) stanowi osłonę wszystkich instrukcji przed uzyskaniem dostępu z zewnątrz, co stanowi jej główne zastosowanie.
To wszystko co trzeba wiedzieć na temat samej konstrukcji, więc zamykam temat i cały artykuł ❤️!