Ilekroć piszemy kod, piszemy funkcje. Funkcja to blok kodu wielokrotnego użytku, który można wywołać w dowolnym miejscu.

Kiedy wywołujemy funkcję, możemy podać jej dane wejściowe jako argumenty, uruchamia ona kod i zwraca dane wyjściowe.

Czym jest koncepcja zamknięcia?

Koncepcja zamknięcia to deklaracja funkcji wewnątrz innej funkcji. Ta koncepcja daje funkcji wewnętrznej możliwość dostępu do zewnętrznych stanów funkcji (lubi zmienne i argumenty).

Zobaczmy przykład kodu

const outerFunction = () => {
  const state = 10;

  const printState = () => {
    console.log(state);
  };

  printState();
};

outerFunction(); // print : 10

Deklaracja funkcji wewnątrz innej pozwala nam napisać kod i zadeklarować, co ten kod robi, nazywając funkcję. Zaletą jest to, że nasz kod staje się bardziej deklaratywny. Teraz wiemy, co robi nasz kod, czytając nazwę funkcji, a nie sam kod.

Kod bez zamknięcia

zobaczmy kod bez zamknięcia

const getFileSeparatorByOs = (os: 'linux' | 'windows', enableOsCheking = true) => {
  if (enableOsCheking) {
    if (os === 'linux') {
      return '/';
    }
    if (os === 'windows') {
      return '\\'
    }
  } else {
    return '/'
  }
};

const linuxSeparator = getFileSeparatorByOs('linux');
console.log(linuxSeparator);

const windowsSeparator = getFileSeparatorByOs('windows');
console.log(windowsSeparator);

const defaultSeparator = getFileSeparatorByOs('windows', false);
console.log(defaultSeparator);

Ten kod nie jest zbyt skomplikowany do zrozumienia, ale możemy uczynić go bardziej deklaratywnym (łatwym do odczytania).

Kod z zamknięciem

zobaczmy kod bez zamknięcia

const getFileSeparatorByOs = (os: 'linux' | 'windows', enableOsCheking = true) => {
  const getLinuxSeparator = () => '/';
  const getWindowsSeparator = () => '\\';
  const getDefaultSeparator = () => '/';
  
  if (enableOsCheking) {
    if (os === 'linux') {
      return getLinuxSeparator();
    }
    if (os === 'windows') {
      return getWindowsSeparator();
    }
  } else {
    return getDefaultSeparator();
  }
};

const linuxSeparator = getFileSeparatorByOs('linux');
console.log(linuxSeparator);

const windowsSeparator = getFileSeparatorByOs('windows');
console.log(windowsSeparator);

const defaultSeparator = getFileSeparatorByOs('windows', false);
console.log(defaultSeparator);

Wniosek

Koncepcja domknięcia polega na zadeklarowaniu funkcji wewnątrz innej, aby dać jej dostęp do zewnętrznych stanów funkcji.

Jeśli fascynuje Cię programowanie funkcyjne, oto mój artykuł o funkcji curryfication https://link.medium.com/JAoSkvB3Byb

Jeśli ten artykuł był dla Ciebie pomocny, polub go. A jeśli lubisz koncepcje programistyczne, które pozwalają na czyste kodowanie, zasubskrybuj teraz, aby niczego nie przegapić.