Pourquoi chaque développeur Javascript devrait-il éviter d’utiliser des instructions if

Arrêtez d’utiliser les instructions if à moins que cela ne soit absolument nécessaire.

Utilisant if est une manière maladroite d’écrire du code et doit être évitée dans la mesure du possible (dans la plupart des situations, c’est presque 100 % du temps).

Ne vous méprenez pas, if Les déclarations sont utiles dans certains scénarios et sont là pour une raison. Cependant, les surutiliser dans des domaines où ils peuvent être évités ne vous rendra pas seulement la vie plus difficile lorsque viendra le temps de revoir le code dans quelques mois, mais aura également un impact sur le temps qu’il faut à un développeur pour comprendre le contexte du code et poursuivre la tâche qui leur a été assignée. Cela perturbe le « flux » et contribue à réduire l’efficacité globale. Moins est plus.

En regardant l’extrait de code ci-dessous, nous récupérons une carte de la base de données par numéro de carte crypté et renvoyons une réponse de validation basée sur certaines conditions.

async validateCard(encryptedCardNumber) {
  const card = await this.lookupCard(encryptedCardNumber);
  if (!card) {
    console.log(NotFoundResponse.message);
    return NotFoundResponse;
  }
  else if (card.isBlacklisted) {
    console.log(BlacklistedReponse.message);
    return BlacklistedResponse;
  }
  else if (card.isDeleted) {
    console.log(DeletedResponse.message);
    return DeletedResponse;
  } 
  else if (card.status !== CardStatus.active) {
    console.log(InactiveResponse.message);
    return InactiveResponse;
  }
  else {
    console.log(ValidResponse.message);
    return ValidResponse;
  }
}

Ayant ces nombreux if non seulement les déclarations nécessitent un peu d’effort pour être déchiffrées, mais au fur et à mesure que de nouvelles conditions sont ajoutées, nous allons bientôt faire défiler de haut en bas pour nous assurer que chaque cas a été satisfait, ajoutant plus de carburant au feu. Parallèlement à cela, il semble également y avoir une duplication de code qui peut être extraite dans un souci de maintenabilité.

L’exemple ci-dessous fait exactement cela. Il remplace les innombrables instructions if par Logical AND et Logical_OR (évaluation de court-circuit), ce qui est beaucoup plus net et plus facile à comprendre. Pour ceux qui ne sont pas familiers avec la disjonction et la conjonction, je vous recommande fortement de le rechercher, mais voici une brève description :

  • ET logique (&&) évalue les opérandes de gauche à droite, en retournant immédiatement avec la valeur du premier faux opérande qu’il rencontre ; Si toutes les valeurs sont véridiques, la valeur du dernier opérande est renvoyée.
  • La OU logique (||) (disjonction logique) pour un ensemble d’opérandes est vrai si et seulement si un ou plusieurs de ses opérandes sont vrais. Avec l’évaluation de court-circuit, il renvoie simplement la première expression véridique.
async validateCard(encryptedCardNumber) {
  const card = await this.lookupCard(encryptedCardNumber);
  
  const response = 
    !card && NotFoundResponse ||
    card.isDeleted && DeletedResponse || 
    card.isBlacklisted && BlacklistedResponse ||
    card.status !== cardStatus.active && InvalidStatus ||
    ValidResponse;

  console.log(response.message);
  return response;
}

À mesure que les exigences de l’entreprise changent, le code change également. Dans certains cas, cela peut supprimer entièrement le code, mais dans d’autres, il s’étend à ce qui existe déjà. Voici une question d’entretien populaire qui est posée et concerne votre capacité à créer une solution quelque peu évolutive

Créer une fonction qui convertit un nombre donné entre 1 et 10 en mots

Simple non ? Il suffit d’avoir un tas d’instructions if (ou switch) dans la fonction que vous devriez faire et d’impressionner l’intervieweur.

function convertIntegerToText(num) {
  if (num === 1) return "one";
  if (num === 2) return "two";
  if (num === 3) return "three";
  // ...
  if (num === 10) return "ten";
}

Mais que se passe-t-il s’ils disent alors ceci,

Les exigences ont changé. Nous voulons maintenant utiliser cette fonction pour convertir des nombres entre 1 et 100 en mots

Qu’allez-vous faire maintenant? Continuez simplement à écrire des déclarations if pour chaque scénario ? Et s’ils changent plus tard les exigences pour convertir les nombres jusqu’à 1000 ?

La meilleure approche consiste à penser à une solution évolutive dès le départ. Un principe fondamental clé à garder à l’esprit lors de la conception, de l’architecture, de l’écriture et de la maintenance du code est la façon dont le temps affecte la durabilité du logiciel et comment rendre votre code résilient dans le temps.

Une solution évolutive est donc un code où il n’y a soit pas if énoncés que ce soit ou quelques énoncés qui peuvent couvrir la majorité des cas, sinon tous, avec peu ou pas de modifications requises.

const ONES = ["", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
const TEENS = ["ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"];
const TENS = ["", "", "twenty", "thirty", "fourty", "fifty", "sixty", "seventy", "eighty", "ninety"];

function convertIntegerToText(num) {
  if (num < 20) 
    return ONES[num] ?? TEENS[num - 10];
  
  if (num < 100)
    return `${TENS[Math.floor(num / 10)]} ${convertIntegerToText(num % 10)}`;
  
  if (num < 1000)
    return `${ONES[Math.floor(num / 100)]} hundred ${convertIntegerToText(num % 100)}`;
  
  throw new Error("Number too high");
}

Pour terminer, jetez un œil à l'extrait ci-dessous et jugez par vous-même lequel vous semble hautement évolutif, maintenable, plus facile à lire et qui vous aidera à rester dans l'état de flux si vous le rencontrez ?

// home.jsx
function getCompanyTemplate(company) {
  if (company === "apple") {
    return 
  }
  if (company === "samsung") {
    return 
  }
  if (company === "sony") {
    return 
  }
  if (company === "lg") {
    return 
  }
}
  
// OR
  
// index.jsx
export const templates = {
  apple: ,
  samsung: ,
  sony: ,
  lg: ,
}

// home.jsx
import { templates } from "./index"
function getCompanyTemplate(company) {
  return templates[company];
}

Mon article précédent présente une solution frontale évolutive en profondeur sans aucune if déclarations. Assurez-vous de le vérifier!


Également publié ici.

CHARGEMENT EN COURS
. . . & commentaires Suite!

Leave a Comment

Your email address will not be published. Required fields are marked *