Qu'est-ce que la programmation fonctionnelle et comment pouvez-vous la faire en JavaScript ?

Vous : « Hé, j'entends constamment parler de programmation fonctionnelle. Cela a l'air cool, mais qu'est-ce que c'est vraiment et en quoi est-ce différent de ce que je fais déjà en JavaScript ? »

Moi : Excellente question ! Décomposons-le étape par étape et comparons la programmation fonctionnelle (FP) avec la méthode impérative traditionnelle de codage.

? Quelle est la différence entre fonctionnel et impératif ?

En programmation impérative, vous écrivez des instructions étape par étape sur comment faire quelque chose. Tout dépend de la séquence de tâches : mise à jour des variables, utilisation de boucles et modification directe de l'état.

Dans la programmation fonctionnelle, vous vous concentrez sur ce que vous voulez faire. Vous utilisez des fonctions pures, évitez les mutations directes et exploitez des outils déclaratifs tels que mapper, filtrer et réduire.

Voyons cela avec des exemples côte à côte utilisant un scénario CRUD (Créer, Lire, Mettre à jour, Supprimer) pour gérer une liste d'utilisateurs.

?️ Exemple 1 : Ajouter un utilisateur

Voie Impérative

Voici un exemple impératif où nous modifions le tableau d'origine :

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

Problèmes :

1. Mutation : La méthode push() modifie le tableau d'origine.
2. Effets secondaires : Si d'autres parties du code dépendent des utilisateurs, elles peuvent être affectées de manière inattendue.

Manière fonctionnelle

Voici l'approche fonctionnelle, où nous renvoyons un nouveau tableau au lieu de le muter :

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

Avantages :

1. Aucune mutation : le tableau des utilisateurs d'origine reste intact.
2. Prévisible : les fonctions pures facilitent la compréhension du comportement.

?️ Exemple 2 : Mise à jour d'un utilisateur

Voie Impérative

Voici un exemple où nous modifions directement un objet à l'intérieur du tableau :

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function updateUser(users, id, newName) {
  for (let i = 0; i < users.length; i++) {
    if (users[i].id === id) {
      users[i].name = newName; // Directly mutates the object
      break;
    }
  }
}

updateUser(users, 1, 'Alicia');
console.log(users);

Problèmes :

1. Mutation : L'objet à l'intérieur du tableau est directement mis à jour.
2. Verbosité : La boucle for indique explicitement à l'ordinateur comment mettre à jour l'utilisateur.

Manière fonctionnelle

Voici comment nous procédons fonctionnellement en utilisant la carte et l'immuabilité :

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const updateUser = (users, id, newName) =>
  users.map(user =>
    user.id === id ? { ...user, name: newName } : user
  );

const updatedUsers = updateUser(users, 1, 'Alicia');
console.log('Original:', users);
console.log('Updated:', updatedUsers);

Avantages :

1. Pas de mutation : nous renvoyons un nouveau tableau et laissons l'original intact.
2. Déclaratif : la carte se concentre sur ce que nous voulons – transformer le tableau – sans gérer explicitement les boucles.

?️ Exemple 3 : Supprimer un utilisateur

Voie Impérative

Voici la version impérative utilisant une boucle et des modifications directes :

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

Problèmes :

1. Mutation : splice() modifie le tableau d'origine.
2. Complexité : La boucle manuelle rend la lecture plus difficile.

Manière fonctionnelle

En utilisant le filtre, nous pouvons exprimer l'intention de manière déclarative :

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

Avantages :

1. Aucune mutation : le filtre crée un nouveau tableau.
2. Propre et lisible  : le code communique clairement l'intention : conserver les utilisateurs à l'exception de celui avec l'ID donné.

? Tableau récapitulatif : fonctionnel vs impératif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!