Funkcje natychmiastowe w JavaScript

Funkcja natychmiastowa IIFE, czyli Immediately-Invoked Function Expression jest, naprościej mówiąc, samowykonującą się funkcją w języku Javascript. Na czym to polega i kiedy nam się może przydać?

Zanim jednak powiem, dlaczego IIFE jest przydatna, najpierw trzeba zrozumieć czym ona dokładnie jest i jak wygląda jej konstrukcja. Zacznijmy od przyjrzenia się typowej deklaracji funkcji w języku JavaScript:

function mojaFunkcja(){
//mój kod
}

A teraz spójrzmy na konstrukcję zmiennej IIFE:

(function(){
// mój kod
})();

Jej konstrukcja polega na zamknięciu całej funkcji w nawiasy (może być to funkcja anonimowa) i natychmiastowym jej wywołaniu. Jej zaletą jest to, że wszystkie zmienne, które są umieszczone wewnątrz niej, nie są narażone na konflikty z globalną przestrzenią nazw. Dzięki temu unikamy kolizji z bibliotekami lub własnymi fragmentami kodu.

Spójrzmy na ten przykład, napisaliśmy taki kod:

(function(){
    var liczba = 100;
    //kod wykonujący akcje ze zmienną liczba
}());

Jednak w naszej aplikacji został również zaimplementowany ten kod, powiedzmy, że znajduje się w jednej z bibliotek lub został napisany przez naszego współpracownika (obydwa wykonują się na tej samej stronie):

(function(){
    var liczba = 10;
    //kod wykonujący akcje ze zmienną liczba
}());

Ponieważ obydwie funkcje znajdują się wewnątrz IIFE, zarówno moje zmienne jak i jego są odosobnione i nie będą ze sobą kolidowały. Jeżeli znajdowałyby się poza IIFE mogłyby się nadpisywać i powodować błędy w działaniu aplikacji.

Jako przykład, mamy dużą stronę ze sporą ilością plików JavaScript. W jednym z nich developer napisał:

var urlPath = "http://ścieżka...";

Natomiast w drugim pliku inny developer również użył zmiennej urlPath, przez co poprzednia wartość została zastąpiona przez tą. Po wciśnięciu guzika dawało to dziwny wynik, załóżmy w postaci przeniesienia nas na stronę usunięcia konta zamiast na stronę płatności.

 

W wielkim skrócie – IIFE stosuje się w celu utrzymania czystości w kodzie i nie wystawiania go na działanie reszty kodu. Masz swoje własne, prywatne zmienne w twoim własnym, prywatnym zakresie.

Dodaj komentarz

*Wypełnij wszystkie pola poprawnie

BYĆ MOŻE TO CIĘ ZAINTERESUJE

Dodane przez Alex Pietrzak | 6 kwietnia 2018
Przygotowanie do egzaminu praktycznego E14/K2 #1 – HTML I CSS
Zgodnie z nową podstawą programową egzaminy E12 i E13 zostają połączone w jedną kwalifikacje - K1, natomiast E14 zostaje przemianowane na kwalifikację K2, o wdzięcznej nazwie "Programowanie, tworzenie i administrowanie...
Dodane przez Alex Pietrzak | 27 stycznia 2018
Kiedy powinienem używać jednostek rem, em, % i pikseli?
Niedawno przeglądając internet znalazłem całkiem interesujące pytanie odnośnie jednostek miar, mianowicie kiedy powinno się używać poszczególnych z nich? Szybki flashback uświadomił mi, że sam miałem ten problem kiedy zaczynałem swoją...
Dodane przez Alex Pietrzak | 19 stycznia 2018
Bootstrap 4 w końcu wydany!
Po niezliczenie wielu publikacjach wersji alpha i beta oraz przesuwaniu daty oficjalnej premiery w końcu jest, bootstrap 4 miał wczoraj oficjalną premierę. Jednak dla osób, które korzystały z którejś z...