Wann immer wir Code schreiben, schreiben wir Funktionen. Eine Funktion ist ein wiederverwendbarer Codeblock, der überall aufgerufen werden kann.

Wenn wir eine Funktion aufrufen, können wir ihr Eingaben als Argumente bereitstellen, sie führt den Code aus und gibt eine Ausgabe zurück.

Was ist das Schließungskonzept?

Das Abschlusskonzept ist die Funktionsdeklaration innerhalb einer anderen Funktion. Dieses Konzept gibt der inneren Funktion die Möglichkeit, auf die äußeren Funktionszustände (wie Variablen und Argumente) zuzugreifen.

Sehen wir uns ein Codebeispiel an

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

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

  printState();
};

outerFunction(); // print : 10

Das Deklarieren einer Funktion innerhalb einer anderen ermöglicht es uns, Code zu schreiben und zu deklarieren, was dieser Code tut, indem wir die Funktion benennen. Der Vorteil ist, dass unser Code aussagekräftiger wird. Jetzt wissen wir, was unser Code tut, indem wir den Funktionsnamen lesen, anstatt den Code selbst zu lesen.

Code ohne Verschluss

Lassen Sie einen Code ohne Abschluss sehen

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);

Dieser Code ist nicht wirklich kompliziert zu verstehen, aber wir können ihn aussagekräftiger (leicht lesbar) machen.

Code mit Verschluss

Lassen Sie einen Code ohne Abschluss sehen

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);

Abschluss

Das Closure-Konzept deklariert eine Funktion innerhalb einer anderen, um ihr Zugriff auf die äußeren Funktionszustände zu geben.

Wenn Sie von funktionaler Programmierung fasziniert sind, finden Sie hier meinen Artikel über die Curryfication-Funktion https://link.medium.com/JAoSkvB3Byb

Wenn dieser Artikel für Sie hilfreich war, geben Sie ihm bitte ein Like. Und wenn Sie Programmierkonzepte mögen, mit denen Sie sauber programmieren können, abonnieren Sie jetzt, damit Sie nichts verpassen.