Programmation fonctionnelle : Qu'est-ce que le concept Closure ? (JavaScript/TypeScript)

Apr 01 2023
Chaque fois que nous écrivons du code, nous écrivons des fonctions. Une fonction est un bloc de code réutilisable qui peut être appelé n'importe où.
Photo de Cristina Gottardi sur Unsplash

Chaque fois que nous écrivons du code, nous écrivons des fonctions. Une fonction est un bloc de code réutilisable qui peut être appelé n'importe où.

Lorsque nous appelons une fonction, nous pouvons lui fournir des entrées en tant qu'arguments, elle exécute le code et renvoie la sortie.

Qu'est-ce que le concept Closure ?

Le concept de fermeture est la déclaration de fonction à l'intérieur d'une autre fonction. Ce concept donne la possibilité à la fonction interne d'accéder aux états de la fonction externe (comme les variables et les arguments).

Voyons un exemple de code

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

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

  printState();
};

outerFunction(); // print : 10

Déclarer une fonction à l'intérieur d'une autre nous permet d'écrire du code et de déclarer ce que fait ce code en nommant la fonction. L'avantage est que notre code devient plus déclaratif. Nous savons maintenant ce que fait notre code en lisant le nom de la fonction plutôt qu'en lisant le code lui-même.

Code sans fermeture

laisse voir un code sans fermeture

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

Ce code n'est pas vraiment compliqué à comprendre, mais on peut le rendre plus déclaratif (facile à lire).

Code avec fermeture

laisse voir un code sans fermeture

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

Conclusion

Le concept de fermeture déclare une fonction à l'intérieur d'une autre pour lui donner accès aux états de fonction externes.

Si vous êtes fasciné par la programmation fonctionnelle, voici mon article sur la fonction de curryfication https://link.medium.com/JAoSkvB3Byb

Si cet article vous a été utile, merci de lui donner un like. Et, si vous aimez les concepts de programmation qui vous permettent de coder proprement, abonnez-vous dès maintenant, pour ne rien manquer.