Programmation fonctionnelle en JavaScript : bases et exemples

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Programmation fonctionnelle en JavaScript : de la théorie à la pratique



La programmation fonctionnelle (PF) est un paradigme qui considère le calcul comme l'évaluation de fonctions mathématiques et évite les changements d'état et les données mutables. En JavaScript moderne, en particulier dans l'environnement Node.js, l'approche fonctionnelle devient de plus en plus populaire grâce à sa prévisibilité, sa testabilité et sa modularité. Dans cet article, nous allons détailler les concepts clés de la PF et montrer comment les appliquer dans des projets réels.



1. Fonctions pures et absence d'effets de bord



Une fonction pure est une fonction qui :

  • Retourne toujours le même résultat pour les mêmes arguments (déterminisme).
  • Ne provoque pas d'effets de bord (ne modifie pas les variables externes, n'affiche pas de données, n'accède pas au système de fichiers).


Exemple de fonction pure :

// Fonction pure : additionne deux nombresconst add = (a, b) => a + b;

console.log(add(2, 3)); // 5console.log(add(2, 3)); // 5 — toujours identique


Exemple de fonction impure :

let counter = 0;const increment = () => {    counter++; // Effet de bord : modifie une variable externe    return counter;};

console.log(increment()); // 1console.log(increment()); // 2 — résultat différent


En programmation fonctionnelle, nous nous efforçons d'écrire uniquement des fonctions pures. Cela rend le code plus facile à tester et à déboguer.



2. Immuabilité des données



L'immuabilité signifie que les données ne sont pas modifiées après leur création. Au lieu de modifier un objet existant, nous créons une nouvelle copie de celui-ci avec les modifications souhaitées. En JavaScript, on utilise souvent l'opérateur spread (...) ou la méthode Object.assign.



Exemple de mise à jour immuable d'un objet :

const user = { name: 'Alice', age: 30 };

// Mauvais : mutationuser.age = 31;

// Bon : création d'un nouvel objetconst updatedUser = { ...user, age: 31 };

console.log(user); // { name: 'Alice', age: 30 }console.log(updatedUser); // { name: 'Alice', age: 31 }


Pour les tableaux, nous utilisons également des méthodes immuables :

const numbers = [1, 2, 3];

// Mutation (mauvais)numbers.push(4);

// Immuable (bon)const newNumbers = [...numbers, 4];

console.log(numbers); // [1, 2, 3]console.log(newNumbers); // [1, 2, 3, 4]


3. Fonctions d'ordre supérieur : map, filter, reduce



Les fonctions d'ordre supérieur sont des fonctions qui prennent d'autres fonctions en arguments ou les retournent. Les trois méthodes les plus populaires en JavaScript sont map, filter et reduce. Elles permettent de traiter des tableaux sans boucles ni mutations.



3.1. map() — transformation de tableau

La méthode map crée un nouveau tableau en appliquant une fonction à chaque élément du tableau d'origine.



const prices = [100, 200, 300];const withTax = prices.map(price => price * 1.2);

console.log(withTax); // [120, 240, 360]// Le tableau d'origine n'a pas changéconsole.log(prices); // [100, 200, 300]


3.2. filter() — filtrage de tableau

La méthode filter retourne un nouveau tableau contenant uniquement les éléments pour lesquels la fonction passée a retourné true.



const ages = [15, 22, 18, 30, 12];const adults = ages.filter(age => age >= 18);

console.log(adults); // [22, 18, 30]


3.3. reduce() — agrégation de données

La méthode reduce réduit un tableau à une seule valeur (nombre, objet, chaîne).



const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 15


En combinant ces méthodes, on peut résoudre des problèmes complexes dans un style fonctionnel :

const users = [  // ... suite du code                

Blogs

Book Recommendations