Domknięcia w JavaScript

 



Dla osób rozpoczynających swoją przygodę z językiem JavaScript jedno z trudniejszych zagadnień stanowią domknięcia. W tym artykule postaram się przybliżyć ten ciekawy temat odpowiadając na pytania czym są domknięcia oraz przedstawiając przykłady ich użycia w kodzie.

Definicji domknięć w JavaScript jest wiele. Głównie sprowadzają się do tego, że jest to wydzielony obszar stworzony przez główną funkcję, w której wszystkie zmienne i wewnętrzne funkcje są niezależne od pozostałej części kodu. Zaletą domknięć jest to, że wewnętrzne funkcje mają dostęp zewnętrznych funkcji, natomiast zewnętrzne funkcje nie mają dostępu do wewnętrznych.

Temat z definicji dosyć prosty ale wciąż nie do końca rozumiany.

Najlepiej zobrazuje to prosty przykład:

var myName = ‘Marcin’;
var myAge = 31;
function changeData(){
    var myName = ‘Piotrek’;
    myAge = 32;
}

changeData(); console.log(myName); console.log(myAge);

W powyższym wypadku do konsoli wydrukujemy odpowiednio Marcin i 32. Zmienna myName wewnątrz funkcji changeData jest zmienną do której dostęp ma tylko funkcja myName.

Przeanalizujmy inny przykład:

function buildName(name){
    var greeting = “Hello, ” + name;
    return greeting;
}

Funkcja buildName() deklaruje zmienną lokalną greeting i zwraca ją. Każde wywołanie funkcji tworzy nowy zakres z nową zmienną lokalną i po wykonaniu tej funkcji, nie mamy możliwości ponownego odniesienia się do tego zakresu.

Z pomocą przychodzą nam domknięcia:

function myName(name){ 
    var greeting = "Cześć, " + name; 
    var sayName = function(){
        var welcome = greeting + " Pozdrawiam!";
        console.log(welcome);
    };
    return sayName;
}

var sayMyName = myName("Marcin"); sayMyName(); // Cześć, Marcin Pozdrawiam! sayMyName(); // Cześć, Marcin Pozdrawiam! sayMyName(); // Cześć, Marcin Pozdrawiam!

Funkcja sayName() z tego przykładu jest domknięciem.

Funkcja sayName() ma własny zasięg lokalny (ze zmienną welcome) i ma również dostęp do zakresu funkcji zewnętrznej. W tym przypadku zmienna greeting z funkcji myName().

Normalnie po wykonaniu funkcji zakres jest niszczony i nie ma do niego dostępu. Po wykonaniu funkcji myName() zakres nie zostanie w tym przypadku zniszczony. Funkcja sayMyName() nadal ma do niego dostęp.

Domknięcie służy jako brama między globalnym kontekstem a zewnętrznym zakresem.

Na koniec chciałbym przedstawić przykład bardzo często poruszany na rozmowach kwalifikacyjnych, a mianowicie słynne setTimeout w pętli.

for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i);
    }, 300);
}

Co spowoduje ten kod? Pierwszą myślą jest wydrukowanie do konsoli cyfr od 0 do 4. Jest to częsty błąd. Kod ten wydrukuje pięć razy piątkę. 

Dlaczego tak się dzieje? Zmienna i jest w przy wypadku zmienną globalną i za każdym razem przekazujemy tą samą wartość zmiennej i.

Jak uzyskać wynik od 0 do 4?

Możemy skorzystać z domknięć, a dokładniej z funkcji IIFE (Immediately-Invoked Function Expression). Przykład ten będzie wyglądał tak:

for (var i = 0; i < 5; i++){
    (function (e){
        setTimeout(function (){
            console.log(e);
        }, 300);
    })(i);
}

Dlaczego teraz osiągniemy zamierzony efekt? Ponieważ funkcja anonimowa ma swój własny zakres i za każdym razem przekazujemy do niej inną wartość zmiennej i.

Przy pierwszym przebiegu pętli, wywołujemy od razu IIFE z parametrem i o aktualnej wartości 0 (wartość z domknięcia). Wywołanie IIFE powoduje ustawienie instrukcji console.log do wykonania z 300ms opóźnieniem z wartością zmiennej e równej 0. Rozpoczyna się nowe przejście przez pętlę. Tym razem zmienna i ma wartość 1 i zostaje przekazana do IIFE, która ustawia wykonanie console.log za 300ms ze zmienną e, o wartości 1 i tak aż do 4.

Podsumowując:

Domknięć możemy użyć w sytuacjach w których:

  1. Chcemy emulować enkapsulację metod
  2. Normalnie użylibyśmy obiektu z wyłącznie jedną metodą

 

 

Marcin Olszewski
Front-End Developer

SALESmanago o platforma Customer Engagement, zaprojektowana dla efektywnych i głodnych sukcesu zespołów marketingowych w eCommerce. Dla marketerów, którzy pragną być zaufanymi partnerami dla swoich CEO. Z naszego rozwiązania korzysta ponad 2000 biznesów online średniej wielkości w 50 krajach oraz liczne globalne marki takie jak Starbucks, Vodafone, Lacoste, New Balance czy Victoria's Secret.

SALESmanago zapewnia maksymalizację wzrostu przychodów oraz poprawy wskaźników KPI dla eCommerce wykorzystując trzy zasady: (1) Customer Intimacy, aby stworzyć autentyczne relacje z klientami w oparciu o dane Zero- i First-Party, (2) Precision Execution, aby zapewnić doskonałe omnichannelowe doświadczenie klienta dzięki hiper-personalizacji oraz (3) Growth Intelligence, która łączy wskazówki opracowane przez specjalistów oraz AI, umożliwiając pragmatyczne i szybkie podejmowanie decyzji w celu maksymalizacji efektu.

Czytaj więcej na: www.salesmanago.pl

6 prognoz na Black Friday dla eCommerce. Czego oczekuje od Ciebie Internet i co z tym zrobić?
6 prognoz na Black Friday dla eCommerce. Czego oczekuje od Ciebie Internet i co z tym zrobić?

    Black Friday będzie rokiem 2022 w pigułce. Internet pęka w szwach od prognoz i strategii. W tym artykule przedstawiamy sześć najbardziej rozpowszechnionych, istotnych lub po prostu interesujących. Przedstawiamy również nasze podejście do nich. Ale przede wszystkim podpowiadamy, co z nimi zrobić. Na honorowe wyróżnienie zasługują prognozy: zabawki rozejdą się jak świeże bułeczki, ubrania […]

Jak zwiększyć Customer Lifetime Value dzięki platformie Customer Engagement
Jak zwiększyć Customer Lifetime Value dzięki platformie Customer Engagement

    Zwiększanie Customer Lifetime Value to jeden z najskuteczniejszych sposobów na podniesieniea przychodów. W końcu klient, którego już mamy, kosztuje nas znacznie mniej niż konwersja nowego użytkownika. W tym artykule pokażemy cztery scenariusze, w których możesz inteligentnie wykorzystać platformę Customer Engagement, aby zapewnić klientom większą wartość i zarobić więcej pieniędzy w tym procesie.   […]

Idealna strona docelowa – audyt Landing Page’a krok po kroku
Idealna strona docelowa – audyt Landing Page’a krok po kroku

    Wyobraź sobie, że masz niesamowicie efektowną stronę docelową, dzięki której dynamicznie przybywa Ci nowych leadów. Statystyki pną się w górę, a sprzedaż rośnie w oszałamiającym tempie. Jak stworzyć dobry landing page, który przyciągnie uwagę? Landing page, czyli strona docelowa, to miejsce, gdzie po kliknięciu w reklamę lub link w mailu trafia odbiorca. Od dobrze stworzonej […]

SALESmanago wzmacnia zespół C-Level Exec, szykując się na czterokrotny wzrost na terenie Europy, i doskonaląc swoje wsparcie marketerów eCommerce … z głową.
SALESmanago wzmacnia zespół C-Level Exec, szykując się na czterokrotny wzrost na terenie Europy, i doskonaląc swoje wsparcie marketerów eCommerce … z głową.

    26 września 2022, Kraków: Po dziewięciocyfrowej inwestycji ze strony Silver Tree i Perwyn, SALESmanago wzmacnia swój zespół wykonawczy C-Level. Celem jest zwiększyć przychody z 20 do 100 milionów Euro w ciągu najbliższych czterech lat i objąć pozycję europejskiego lidera customer engagement.   Nowi członkowie C-Level to doświadczeni liderzy z organizacji B2B, eCommerce i […]

Badanie firmy Forrester Consulting: 90% firm marketingowych rozpocznie pozyskiwanie Danych Zero-Party w ciągu roku
Badanie firmy Forrester Consulting: 90% firm marketingowych rozpocznie pozyskiwanie Danych Zero-Party w ciągu roku

    Prawie wszyscy przedsiębiorcy planują rozpocząć pozyskiwanie Danych Zero-Party w celu rozwiązania problemu deprecjacji informacji. Jednocześnie, jak pokazują badania Forrestera, mniej niż połowa z nich wie, jak z powodzeniem korzystać z takich zbiorów danych!   W lutym 2022 r. Forrester Consulting przeprowadził ankietę wśród 200 osób decyzyjnych różnych szczebli (manager+), skoncentrowanych na pozyskiwaniu klientów. […]

Czy Customer Engagement Platform to tylko chwytliwy buzzword na CDP?
Czy Customer Engagement Platform to tylko chwytliwy buzzword na CDP?

    Customer Engagement Platform to znacznie więcej niż platforma Customer Data, którą już znasz, być może nawet używasz. Jej funkcje znacznie wykraczają poza zbieranie i ujednolicanie danych, a umacniający wpływ na zespoły marketingowe jest ogromny. W tym artykule szczegółowo wyjaśnimy różnicę między tymi systemami. Aby stawić czoła wyzwaniom obecnej recesji, marketerzy muszą w dużym […]

Recesja lojalności w eCommerce. Jak ma sobie z nią radzić marketer?
Recesja lojalności w eCommerce. Jak ma sobie z nią radzić marketer?

    Inflacja sprawia, że klienci zastanawiają się dwa razy, nim otworzą portfel. I choć wciąż kupują, to ich zachowanie się zmieniło. W sektorze eCommerce obserwujemy inflacyjną recesję lojalności, która stawia marketerów w paradoksalnej sytuacji: muszą zwiększać swoją efektywność bez zwiększania kosztów operacyjnych. Jest z tego wyjście  – z głową.   Zachowanie klientów się zmieniło […]

Skąd ten Lean? Nowe podejście SALESmanago do marketingu w eCommerce
Skąd ten Lean? Nowe podejście SALESmanago do marketingu w eCommerce

    Jak w chińskim przysłowiu, żyjemy w ciekawych czasach, które zmuszają nas do przekraczania ograniczeń i jeszcze efektywniejszego działania – mówiąc prościej, zgodnie z zasadami lean. W tym artykule przedstawiamy najpilniejsze wyzwania w dzisiejszym marketingu eCommerce i dostarczamy wskazówek, jak przygotować się na zmiany, których efekty już widzimy wokół nas.   Ciekawe czasy   […]

4 sposoby na personę i odszukanie wartościowych nabywców we własnej bazie danych – z głową!
4 sposoby na personę i odszukanie wartościowych nabywców we własnej bazie danych – z głową!

    W poprzednim artykule zwróciliśmy uwagę, że Lean Marketing wymaga inteligentnych, wysoce wydajnych, drobnych kroków, zamiast wielkich planów marketingowych. W tym artykule pokażemy 4 praktyczne sposoby na wykonanie takich kroków i znalezienie wartościowych klientów we własnej bazie danych.   Wzmocnienie elementów strategii lean   Jak wskazaliśmy również w poprzednim artykule, niektóre elementy strategii Lean […]

Dlaczego Lean Marketing to strzał w dziesiątkę dla eCommerce?
Dlaczego Lean Marketing to strzał w dziesiątkę dla eCommerce?

    Najpierw było Lean Manufacturing, potem Lean Management. Ukonstytuowały one powszechne rozumienie terminu Lean, który oznacza osiąganie celów bez kosztownych strat lub nadwyżek – czasu, zasobów lub wysiłku. Lean Marketing zawiera wszystkie te elementy, a ponadto czerpie wiele ze stylu zarządzania projektami Agile. Lean Marketing jest również znacznie łatwiejszy, gdy masz platformę Customer Data […]