Apprenez à programmer avec JavaScript

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

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'une 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 !

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 refactoriser 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.

DRY – Don'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 refactoriser 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 des 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 vous 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.

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 !

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 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 !

Pratiquez l’écriture de code propre

Voici un code js avec plusieurs fonctions et différentes mauvaises pratiques rendant le code pas propre. Votre objectif est de créer une fonction pour alléger votre code.

Correction expliquée de l’exercice

L’exercice est coupé en 3 parties :

Code non DRY

Code avant correction :

//variable de différentes personnes
let personne1 = "Jean";
let personne2 = "Paul";
let person3 = "Marcel";

//On met la première lettre en majuscule, on salue la première personne et on donne le nombre de lettre dans son prénom
personne1 = personne1[0].toUpperCase() + personne1.substr(1);
const longueurPrenom1 = personne1.length;
console.log(`Bonjour ${personne1}, ton prénom contient ${longueurPrenom1} lettres`);

//On met la première lettre en majuscule, on salue la deuxième personne et on donne le nombre de lettre dans son prénom
personne2 = personne2[1].toUpperCase() + personne2.substr(1);
const longueurPrenom2 = personne2.length;
console.log(`Bonjour ${personne2}, ton prénom contient ${longueurPrenom2} lettres`);

//On met la première lettre en majuscule, on salue la troisième personne et on donne le nombre de lettre dans son prénom
personne3 = personne3[2].toUpperCase() + personne3.substr(1);
const longueurPrenom3 = personne3.length;
console.log(`Bonjour ${personne3}, ton prénom contient ${longueurPrenom3} lettres`);

 Code après correction :

//variable de différentes personnes
let personne1 = "Jean";
let personne2 = "Paul";
let personne3 = "Marcel";

function saluer(prenom){
  //On met la première lettre en majuscule, on salue la personne et on donne le nombre de lettre dans son prénom
  const monPrenom = prenom[0].toUpperCase() + prenom.substr(1);
  const longueurPrenom = monPrenom.length;
  console.log(`Bonjour ${monPrenom}, ton prénom contient ${longueurPrenom} lettres`);
}

//On salue les 3 personnes
saluer(personne1);
saluer(personne2);
saluer(personne3);

Explication :

Ici, on exécute trois lignes de traitement pour chacune des 3 personnes (   person1  ,  person2  et  person3  ). Le code est donc répété 3 fois avec juste une variable qui change. Dans ce cas-là, on crée une fonction unique  saluer(prenom)  qui va faire ce traitement basé sur la variable  prenom  . Il ne reste plus qu’à appeler la fonction 3 fois avec les 3 personnes en paramètre.

Code mal nommé

Code avant correction :

//tableau des âges des élèves dans la classe

const lrf = [14, 14, 15, 14, 16, 14, 14, 13];

// Nombre d'élèves

const kf = lrf.length;

// variable pour calculer la somme des âges

let mf = 0;

for(let df of lrf){

    mf += df;

}

//moyenne d'âge dans la classe

const mld = mf / kf;

console.log('Il y a ' + kf + " élèves dans la classe et la moyenne d'âge est " + mld);

Code après correction :

//tableau des âges des élèves dans la classe

const agesElevesDeClasse = [14, 14, 15, 14, 16, 14, 14, 13];

// Nombre d'élèves

const nombreEleves = agesElevesDeClasse.length;

// variable pour calculer la somme des âges

let sommeAges = 0;

for(let age of agesElevesDeClasse){

    sommeAges += age;

}

//moyenne d'âge dans la classe

const moyenneAgesDeClasse = sommeAges / nombreEleves;

console.log('Il y a ' + nombreEleves + " élèves dans la classe et la moyenne d'âge est " + moyenneAgesDeClasse);

Explication :

Ici on a un code qui compte et calcule la moyenne d'âge d’une classe. Les variables choisies ne sont pas pertinentes, elles n’ont que 2 ou 3 lettres qui ne veulent rien dire de particulier. L’idéal est de nommer les variables pour  comprendre à quoi elles servent.

Après correction on peut voir que l’on nomme les variables avec des noms explicites. Maintenant, juste en lisant les variables on comprend la logique du code.

Code mal mis en forme

Code avant correction :

const temperature = 25;

 

if(temperature < 10){  console.log("Il fait très froid"); }

else if(temperature < 0){

console.log(

"Il fait froid"

);

}else if(temperature < 10){

console.log(            "Il fait frais");

}else if(temperature < 20){

console.log("Il fait doux");

}else if(temperature < 30){

console.log("Il fait bon");

 

 

 

 

}else{

 

 

 

 

 

console.log("Il fait chaud");

}

Code après correction :

const temperature = 25;

 

if(temperature < 10){

    console.log("Il fait très froid"); }

else if(temperature < 0){

    console.log("Il fait froid");

}else if(temperature < 10){

    console.log("Il fait frais");

}else if(temperature < 20){

    console.log("Il fait doux");

}else if(temperature < 30){

    console.log("Il fait bon");

}else{

    console.log("Il fait chaud");

}

Explication :

Ici on a appliqué une bonne indentation, on a bien mis en forme les sauts de ligne pour les blocs et les brackets  ({})  et on a évité les espaces et sauts de ligne superflus.

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 différents choix possibles.

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