• 15 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 6/30/20

Écrivez des fonctions propres

Log in or subscribe for free to enjoy all this course has to offer!

Pourquoi la propreté du code est-elle importante ?

Avant de plonger dans les méthodes de codage propre, voyons pourquoi il est important de garder votre code aussi propre que possible.

Personnes en train de coder
Coder proprement

Pensez au lieu le plus désordonné et le moins rangé de votre domicile. Il peut s'agir d'un tiroir, d'un placard ou même d'un pièce entière. À quel point est-ce difficile de trouver quelque chose à cet endroit ? Si vous l'avez récemment utilisé, ce n'est peut-être pas si difficile, mais si c'était il y a longtemps, les choses peuvent devenir complexes.

C'est la même chose, ou même pire, avec le code. Si vous n'y avez pas jeté un œil depuis quelques mois et que vous ne l'avez pas écrit proprement, il peut être très long de se rappeler ce que fait quelle fonction, et comment les choses s'organisent entre elles.

Imaginez maintenant que vous ayez hérité du tiroir, du placard ou de la chambre mal rangée de quelqu'un d'autre, qui ne vivrait plus ici. C'est à cela que ressemble le travail sur le code d'une personne qui ne l'a pas maintenu propre !

Maintenant que vous savez pourquoi vous devez coder proprement, voyons comment faire !

Être une fonction ou ne pas être

Quand devrait-on utiliser des fonctions ? Combien faut-il en écrire ? Quelle devrait être leur longueur ?

Jetons un œil à quelques situations où les fonctions contribuent à la propreté de votre code.

Ne vous répétez pas

Si vous vous trouvez à écrire plusieurs fois le même code, vous devriez probablement le refactorer dans une fonction.

Observons le code suivant :

if (firstUser.online) {
    if (firstUser.accountType === "normal") {
      console.log("Hello " + firstUser.name + "!");
    } else {
    console.log("Welcome back premium user " + firstUser.name + "!");
    }
}

if (secondUser.online) {
    if (secondUser.accountType === "normal") {
      console.log("Hello " + secondUser.name + "!");
    } else {
    console.log("Welcome back premium user " + secondUser.name + "!");
    }
}

if (thirdUser.online) {
    if (thirdUser.accountType === "normal") {
      console.log("Hello " + thirdUser.name + "!");
    } else {
    console.log("Welcome back premium user " + thirdUser.name + "!");
    }
}

Nous répétons ici la même tâche plusieurs fois pour des utilisateurs différents. C'est une bonne occasion de factoriser votre code dans une fonction :

const sendWelcomeMessageToUser = (user) => {
    if (user.online) {
        if (user.accountType === "normal") {
          console.log("Hello " + user.name + "!");
        } else {
        console.log("Welcome back premium user " + user.name + "!");
        }
    }
}

sendWelcomeMessageToUser(firstUser);
sendWelcomeMessageToUser(secondUser);
sendWelcomeMessageToUser(thirdUser);

Nous avons créé une fonction  sendWelcomeMessageToUser  (un nom qui exprime clairement ce que fait la fonction) et l'avons appelée pour chaque utilisateur. Dans ce cas, nous avons réduit la quantité de code de 23 lignes à 13, tout en le rendant plus lisible. Grâce à un nom de fonction descriptif, vous pouvez indiquer que nous envoyons un message de bienvenue à trois utilisateurs.

DRYDon't Repeat Yourself (Ne vous répétez pas) — est un principe de programmation qui réduit au minimum la répétition du code.

Pratiquez : le principe DRY

Voici une activité où vous devrez trouver où le code nécessite une factorisation, et comment le faire.

Rendez-vous sur cet éditeur CodePen. Ce code importe des séries depuis la base de données, en génère les informations pour les composants du site, et les met dans un tableau à exporter.

Cependant, pour l'instant, le même code est répété pour chaque série. L'endroit parfait pour une fonction !

  1. Créez une fonction qui vous permet de refactorer ce code, afin de le raccourcir et de le rendre plus lisible.

  2. Appelez votre nouvelle fonction pour chaque série pour créer le composant correspondant, en passant les arguments appropriés.

Solution :

Vous avez terminé ? Alors voici un nouveau CodePen avec une solution à l’exercice.

Quelqu'un sait-il ce que fait ce truc ?

Avec des fonctions qui ne font qu'une seule chose (et dont le nom décrit ce qu'elles font), vous pouvez rendre votre code bien plus propre et plus facile à comprendre :

Voyons la fonction suivante :

const printStringStats = (stringToTest) => {
  const wordArray = stringToTest.split(" ");
  const wordCount = wordArray.length;
  let letterCount = 0;
  for (let word of wordArray) {
    word.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
    letterCount += word.length;
  }
  const averageWordLength = parseFloat((letterCount / wordCount).toFixed(2));
  const stringStats = {
    wordCount: wordCount,
    letterCount: letterCount,
    averageWordLength: averageWordLength
  };
  console.log(stringStats);
}

Bien qu'il y ait un nom descriptif, et que vous puissiez voir qu'il s'agit d'imprimer le nombre de mots, le nombre de lettres et la longueur moyenne de mots d'une chaîne, il se passe tellement de choses qu'il est difficile de suivre si vous ne comprenez pas chaque ligne. Cette fonction fait trop de choses d'un coup.

Voyons maintenant cette refactorisation :

const getWordCount = (stringToTest) => {
  const wordArray = stringToTest.split(" ");
  return wordArray.length;
}

const getLetterCount = (stringToTest) => {
  const wordArray = stringToTest.split(" ");
  let totalLetters = 0;
  for (let word of wordArray) {
    word.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
    totalLetters += word.length;
  }
  return totalLetters;
}

const getAverageWordLength = (stringToTest) => {
  return parseFloat((getLetterCount(stringToTest) / getWordCount(stringToTest)).toFixed(2));
}

const printStringStats = (stringToTest) => {
  console.log({
    wordCount: getWordCount(stringToTest),
    letterCount: getLetterCount(stringToTest),
    averageWordLength: getAverageWordLength(stringToTest)
  })
}

Bien que cette version soit plus longue, il y a trois fonctions —  getWordCount  (qui renvoie le nombre de mots),  getLetterCount  (qui renvoie le nombre de lettres) et  getAverageWordLength  (qui renvoie la longueur moyenne des mots)  — appelées par la fonction  printStringStats  (qui imprime les statistiques de la chaîne de caractères).

Vous pouvez ne pas comprendre la complexité de chaque fonction, mais pouvez bien comprendre ce qui se passe parce qu'elles ne font qu'une seule chose mentionnée dans leur nom. Vous pourriez utiliser les fonctions individuelles sans avoir besoin de savoir ce qui se passe sous le capot.

Laissez des commentaires

C'est en apprenant à laisser des commentaires clairs et cohérents que vous brillerez en tant que développeur. Néanmoins, ne commentez pas chaque ligne ou fonction. Les commentaires doivent clarifier ce qui n'est pas immédiatement apparent à la lecture du code.

Il y a deux types de commentaires — sur une seule ligne et sur plusieurs lignes — et chacun a sa place. Ajoutons des commentaires à notre exemple précédent :

const getWordCount = (stringToTest) => {
  const wordArray = stringToTest.split(' ');
  return wordArray.length;
}

const getLetterCount = (stringToTest) => {
  const wordArray = stringToTest.split(' ');
  let totalLetters = 0;
  for (let word of wordArray) {
    // retire la ponctuation pour ne compter que les lettres
    word.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
    totalLetters += word.length;
  }
  return totalLetters;
}

/*
** renvoie la longueur moyenne des mots
** arrondie à deux chiffres après la virgule
*/
const getAverageWordLength = (stringToTest) => {
  return parseFloat((getLetterCount(stringToTest) / getWordCount(stringToTest)).toFixed(2));
}

const printStringStats = (stringToTest) => {
  console.log({
    wordCount: getWordCount(stringToTest),
    letterCount: getLetterCount(stringToTest),
    averageWordLength: getAverageWordLength(stringToTest)
  })
}

Comme vous pouvez le voir, toutes les fonctions ou lignes n'ont pas de commentaire :

  • le commentaire sur une seule ligne explique la raison de l'appel, d'apparence complexe, à  replace  ;

  • le commentaire sur plusieurs lignes explique que la longueur moyenne du mot sera renvoyée à 2 décimales près, car ce n'est pas immédiatement apparent.

Laisser juste le nombre correct de commentaires est une forme d'art, mais vous y arriverez en pratiquant ! Assurez-vous donc de commenter votre code !

Écrivez du code avec style

Adopter un style cohérent est nécessaire pour que le code reste propre, et bien qu'il n'y ait pas de bonne façon absolue de faire les choses, il y a un certain nombre de conventions qui peuvent vous faciliter la vie.

Qu'y a-t-il dans un nom ?

Utilisez les conventions de nommage

Comme vous l'avez vu jusqu'à présent, les noms de variable et de fonction dans JavaScript sont généralement écrits en "camel case" minuscule (getWordCount,  numberOfCats), alors que les noms de classe sont écrits en "camel case" majuscule (PremiumAccount,  SpecialGuest). Vous n'êtes pas obligé d'utiliser cette convention ; néanmoins, elle facilite la lecture de votre code car elle est respectée par la grande majorité des développeurs.

Choisissez un nom

Des noms clairs et descriptifs pour les variables et les fonctions sont plus faciles à lire que des noms raccourcis, obscurs ou aléatoires. Voyez par exemple la fonction :

const lc = (s) => {
  const w = s.split(' ');
  let l = 0;
  for (let wel of w) {
    wel.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
    l += wel.length;
  }
  return l;
}

Cette fonction fait parfaitement ce qu'elle est censée faire. Mais que fait-elle ?

100 points si vous l'avez reconnue comme la fonction de comptage de lettres de notre exemple précédent !

const getLetterCount = (stringToTest) => {
  const wordArray = stringToTest.split(' ');
  let totalLetters = 0;
  for (let word of wordArray) {
    // retire la ponctuation pour ne compter que les lettres
    word.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
    totalLetters += word.length;
  }
  return totalLetters;
}

Choisissez vos noms avec attention, et votre code sera clair et facile à lire (et vous n'aurez plus à écrire autant de commentaires !).

Mettez en forme votre code

Le terme mise en forme du code recouvre beaucoup de domaines ; en voici quelques-uns :

  • mise en retrait
    Tabulations ou espaces ? Deux espaces ou quatre ? Quel que soit votre choix, gardez le même style partout :

if (userOnline) {
    for (let message of user.messages) {
        message.send();
    }
    sendNotification();
}
  • Espacement
    Les versions ci-dessous ont le même fonctionnement :

if(condition) {
    let i=0;
    i+=condition.thing;
    let j=i-3;
}`
if (condition) {
    let i = 0;
    i += condition.thing;
    let j = i - 3;
}

En général, en ajoutant un peu d'espace vous rendez le code plus facile à lire, mais les deux sont techniquement corrects. Vous ne pouvez néanmoins n'en choisir qu'un !

  • Positionnement des accolades

if (condition) {
    doTheThing();
} else {
    doTheOtherThing();
}
if (condition) 
{
    doTheThing();
} 
else 
{
    doTheOtherThing();
}

La mise en forme du code est source de nombreuses discussions entre les développeurs, et dépend souvent du reste de votre équipe. Pour écrire votre propre code, choisissez le style que vous préférez et tenez-vous-y !

En résumé

Dans ce chapitre, nous avons étudié quelques techniques et meilleures pratiques de codage propre :

  • refactorisation du code en fonctions — quand du code se répète, ou quand une fonction fait trop de choses ;

  • les fonctions qui ne font qu'une seule chose sont souvent plus claires que les fonctions à plusieurs usages :

  • laisser des commentaires appropriés rend votre code beaucoup plus facile à comprendre ;

  • il est très important d'avoir une convention de nommage stricte avec des noms clairs et descriptifs ;

  • vous avez vu des exemples de mise en forme du code, et des différents choix possibles.

Dans le chapitre suivant, nous allons nous intéresser à la façon de tester les fonctions pour éviter les surprises !

Example of certificate of achievement
Example of certificate of achievement