Introduction

Ce module explore trois concepts avancés des fonctions en JavaScript : les fonctions fléchées, les fermetures (closures), et les fonctions génératrices. Chaque concept est expliqué avec des exemples pour illustrer leur utilité et leur mise en œuvre dans des scénarios de développement réels.

1. Fonctions Fléchées

Les fonctions fléchées offrent une syntaxe plus concise pour écrire des fonctions. Elles sont particulièrement utiles pour les opérations courtes et lorsque vous travaillez avec des fonctions de rappel.

Exemple 0 : Carré d'un tableau

const arr = [1, 2, 3, 4];
const squares = arr.map(x => x * x);
console.log(squares); // [1, 4, 9, 16]

 

Exemple 1 : Filtrage d'un tableau

Utilisation des fonctions fléchées pour filtrer des éléments dans un tableau basé sur une condition.

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(n => n % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Exemple 2 : Opérations mathématiques courtes

Simplification d'une opération mathématique comme une somme avec reduce.

const sum = numbers.reduce((total, value) => total + value, 0);
console.log(sum); // 21

Exemple 3 : Manipulation de chaînes

Utilisation d'une fonction fléchée pour transformer les éléments d'un tableau.

const names = ["Alice", "Bob", "Charlie"];
const lengths = names.map(name => name.length);
console.log(lengths); // [5, 3, 7]

Exemple 4 : Gestion des événements

Exemple de fonction fléchée utilisée comme callback dans un gestionnaire d'événements.

Un callback est une fonction passée en argument à une autre fonction, qui est ensuite exécutée à l'intérieur de cette fonction hôte à un moment donné. Ce concept est largement utilisé en JavaScript, notamment pour gérer des opérations asynchrones comme les requêtes réseau, les événements utilisateur ou les retards de temps (timers). Les callbacks permettent de s'assurer que certaines parties du code ne s'exécutent qu'après la fin de certaines tâches, comme la réception d'une réponse de serveur, garantissant ainsi que les données nécessaires sont disponibles avant de continuer l'exécution.

document.getElementById('myButton').addEventListener('click', () => alert('Button clicked!'));

Ces exemples montrent comment les fonctions fléchées peuvent rendre le code plus lisible et concis, particulièrement lorsqu'il s'agit de passer des fonctions en tant qu'arguments ou de manipuler des données de manière succincte.

 

Points Clés :

  • Moins verbeuse que les fonctions traditionnelles.
  • Ne possèdent pas leur propre contexte this, elles l'héritent de l'environnement englobant.

2. Fermetures (Closures)

Une fermeture est une fonction qui se souvient des variables de l'environnement dans lequel elle a été créée, même après que l'environnement externe ait disparu.

Exemple :

function createCounter() {
    let count = 0;
    return function() {
        count += 1;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Explication :

La fonction createCounter retourne une fonction anonyme qui accède à la variable count. Chaque appel à counter() incrémentera count et retournera sa nouvelle valeur, montrant que l'état est conservé entre les appels.

Exemple 2 : Gestionnaire d'Événements

function setupButton() {
    const buttonName = "Click Me"; // 'buttonName' est une variable locale à 'setupButton'
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Button says: " + buttonName); // Accède à 'buttonName'
    });
}

setupButton();

Explication : Dans cet exemple, une fonction est définie pour configurer un bouton. La fonction interne (handler de l'événement click) accède à la variable buttonName définie dans la fonction extérieure. Lorsque le bouton est cliqué, il affiche le nom du bouton, prouvant que la fermeture garde l'accès à buttonName, même après que setupButton() ait terminé son exécution.

Ces exemples montrent comment les fermetures permettent à une fonction de conserver l'accès à son environnement lexical, y compris après la fin de l'exécution de la fonction qui les a créées.

 

Points Clés :

  • Permettent de créer des données privées.
  • Utiles pour encapsuler des comportements.

3. Fonctions Génératrices

Les fonctions génératrices permettent de définir une fonction qui peut arrêter son exécution et reprendre plus tard, tout en conservant son contexte.

Exemple 1 : Génération d'ID

function* idGenerator() {
    let id = 1;
    while(true) {
        yield id;
        id++;
    }
}

const generator = idGenerator();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2

 

Les fonctions génératrices en JavaScript sont très puissantes pour gérer des opérations qui requièrent une exécution pas à pas ou la gestion de séquences infinies. Voici quelques exemples supplémentaires pour mieux comprendre leur utilisation et capacités.

Exemple 1 : Génération d'une Séquence de Fibonacci

function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const sequence = fibonacci();
console.log(sequence.next().value); // 0
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 2
console.log(sequence.next().value); // 3
console.log(sequence.next().value); // 5

Explication : Cette fonction génératrice crée une séquence de Fibonacci infinie. Chaque appel de next() sur le générateur continue la séquence à partir du dernier point d'arrêt, produisant le prochain nombre de la séquence sans fin.

Exemple 2 : Navigation à travers un Arbre de Données

function* traverseTree(node) {
  yield node.value;
  if (node.left) yield* traverseTree(node.left);
  if (node.right) yield* traverseTree(node.right);
}

const tree = {
  value: 1,
  left: { value: 2, left: { value: 4 } },
  right: { value: 3 }
};

const values = [...traverseTree(tree)]; // [1, 2, 4, 3]

Explication : Cet exemple montre comment utiliser une fonction génératrice pour parcourir un arbre binaire. Le mot-clé yield* est utilisé pour déléguer à une autre fonction génératrice, permettant de parcourir récursivement chaque branche de l'arbre.

Exemple 3 : Contrôle de Flux de Traitement Asynchrone

function* asyncTasks() {
  const resultA = yield doAsyncTaskA();
  console.log(resultA);
  const resultB = yield doAsyncTaskB(resultA);
  console.log(resultB);
}

function scheduler(generator) {
  const iterator = generator();
  function step(lastResult) {
    const {value, done} = iterator.next(lastResult);
    if (!done) {
      value.then(step);
    }
  }
  step();
}

scheduler(asyncTasks);

Explication : Dans cet exemple, la fonction génératrice coordonne une séquence de tâches asynchrones, où chaque tâche attend le résultat de la précédente avant de continuer. La fonction scheduler gère la continuation de la fonction génératrice chaque fois qu'une promesse est résolue.

Ces exemples montrent comment les fonctions génératrices peuvent être utilisées pour des séquences complexes, des structures de données itérables, et des flux de contrôle asynchrones, offrant une abstraction puissante pour gérer différentes formes de données et d'opérations.

Points Clés :

  • yield peut être utilisé pour pauser et reprendre la fonction.
  • Idéal pour gérer des séquences infinies ou des tâches qui nécessitent de la pause pendant l'exécution.

Conclusion

Ces fonctionnalités avancées de JavaScript enrichissent les capacités du langage en permettant des patterns de codage plus expressifs et efficaces. Ils sont essentiels pour écrire du code propre et maintenable, surtout dans des applications complexes.

Ce cours est conçu pour que les développeurs puissent non seulement comprendre mais aussi appliquer ces concepts dans leurs projets de développement quotidien.

 

Modifié le: jeudi 16 mai 2024, 09:50