L'écriture de code qui ne doit être utilisé qu'une seule fois peut être effectuée comme vous le souhaitez. Mais, dans la plupart des cas, il est essentiel d’adhérer aux meilleures pratiques et de maintenir un code propre.

N'oubliez pas que votre code sera probablement lu par un autre développeur, ou même par vous-même, à une date ultérieure. Le moment venu, votre code devrait être explicite. Chaque variable, fonction et commentaire doit être précis, clair et facile à comprendre. Cette approche facilite non seulement la maintenance, mais favorise également la collaboration et l'efficacité au sein de votre équipe de développement.

Ainsi, lorsque quelqu'un (ou vous) reviendra pour ajouter ou modifier votre code, il sera facile de comprendre ce que fait chaque ligne de code. Sinon, la plupart de votre temps sera consacré à simplement essayer de comprendre le code. Le même problème se posera pour un nouveau développeur travaillant sur votre base de code. Ils ne comprendront pas le code s’il n’est pas propre. Par conséquent, il est très important d’écrire du code propre.

Qu’est-ce que le Clean Code ?

Le code propre fait essentiellement référence au code qui est

1. Facile à comprendre
2. Facile à déboguer
3. Facile à maintenir
4. Les commentaires sont bien rédigés, courts et compréhensibles
5. Aucun code en double (redondant) et suit la règle KISS (restez simple, stupide !)

Avec cela, pour écrire du code propre, le développeur doit maintenir la cohérence du code et le développeur doit suivre les meilleures pratiques pour le langage particulier.

Pourquoi le Clean Code est-il important ?

Lorsque les équipes suivent les principes d'un code propre, la base de code devient plus facile à lire et à naviguer. Cela aide les développeurs à comprendre rapidement le code et à commencer à contribuer. Voici quelques raisons pour lesquelles un code propre est important.

1. Lisibilité et maintenance : Il est facile de lire et de comprendre le code lorsqu'il est bien écrit, contient de bons commentaires et suit les meilleures pratiques. Une fois le problème ou le bug survenu, vous savez exactement où le trouver.

2. Débogage : Le code propre est conçu avec clarté et simplicité, ce qui facilite la localisation et la compréhension de sections spécifiques de la base de code. Une structure claire, des noms de variables significatifs et des fonctions bien définies facilitent l'identification et la résolution des problèmes.

3. Qualité et fiabilité améliorées : Un code propre suit les meilleures pratiques de langages particuliers et donne la priorité au code bien structuré. Cela ajoute de la qualité et améliore la fiabilité. Cela élimine ainsi les erreurs qui pourraient survenir en raison d'un code bogué et non structuré.

Maintenant que nous comprenons pourquoi un code propre est crucial, examinons quelques bonnes pratiques et principes pour vous aider à écrire du code propre.

Principes du code propre

Pour créer un code de qualité, il faut adhérer aux principes et pratiques d'un code propre, comme l'utilisation de petites méthodes bien définies.

Voyons cela en détail.

1. Évitez les numéros codés en dur

Au lieu d'utiliser directement la valeur, nous pouvons utiliser une constante et lui attribuer cette valeur. Ainsi, à l'avenir, si nous devons mettre à jour cette valeur, nous devrons la mettre à jour à un seul endroit.

Exemple

function getDate() {
  const date = new Date();
  return "Today's date: "   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return "Today's date: "   date;
}

Dans ce code, à un moment donné, il y a un changement qui, au lieu de « Date du jour : », doit devenir « Date : ». Cela peut être amélioré en attribuant cette chaîne à une variable.

Code amélioré :

const todaysDateLabel = "Today's date: ";

function getDate() {
  const date = new Date();
  return todaysDateLabel   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return todaysDateLabel   date;
}

Dans le code ci-dessus, il devient facile de modifier la chaîne de date lorsque cela est nécessaire. Cela améliore la maintenabilité.

2. Utilisez des noms significatifs et descriptifs
Au lieu d'utiliser des noms de variables communs partout, nous pouvons utiliser des noms un peu plus descriptifs et explicites. Le nom de la variable lui-même doit définir son utilisation.

Règles de noms

1. Choisissez des noms descriptifs et sans ambiguïté.
2. Faites une distinction significative.
3. Utilisez des noms prononçables.
4. Utilisez des noms consultables.
5. Remplacez les nombres magiques par des constantes nommées.
6. Évitez les encodages. N'ajoutez pas de préfixes et ne saisissez pas d'informations.

Exemple

// Calculate the area of a rectangle
function calc(w, h) {
    return w * h;
}

const w = 5;
const h = 10;
const a = calc(w, h);
console.log(`Area: ${a}`);

Ici, le code est correct mais il y a un certain flou dans le code. Voyons le code où les noms descriptifs sont utilisés.

Code amélioré

// Calculate the area of a rectangle
function calculateRectangleArea(width, height) {
    return width * height;
}

const rectangleWidth = 5;
const rectangleHeight = 10;
const area = calculateRectangleArea(rectangleWidth, rectangleHeight);
console.log(`Area of the rectangle: ${area}`);

Ici, tous les noms de variables sont explicites. Ainsi, il est facile de comprendre le code et cela améliore la qualité du code.

3. N'utilisez le commentaire que lorsque cela est nécessaire
Vous n'avez pas besoin d'écrire des commentaires partout. Écrivez simplement là où cela est nécessaire et écrivez de manière courte et facile à comprendre. Trop de commentaires entraîneront de la confusion et une base de code désordonnée.

Règles de commentaires

1. Essayez toujours de vous expliquer dans le code.
2. Ne soyez pas redondant.
3. N'ajoutez pas de bruit évident.
4. N'utilisez pas de commentaires entre accolades fermantes.
5. Ne commentez pas le code. Supprimez simplement.
6. Utiliser comme explication de l'intention.
7. Utiliser comme clarification du code.
8. À utiliser comme avertissement des conséquences.

Exemple

// Function to get the square of a number
function square(n) {
    // Multiply the number by itself
    var result = n * n; // Calculate square
    // Return the result
    return result; // Done
}

var num = 4; // Number to square
var squared = square(num); // Call function

// Output the result
console.log(squared); // Print squared number

Ici, nous pouvons voir que les commentaires sont utilisés pour définir des étapes qui peuvent être facilement comprises en lisant le code. Ces commentaires sont inutiles et rendent le code encombré. Voyons l'utilisation correcte des commentaires.

Code amélioré

/**
 * Returns the square of a number.
 * @param {number} n - The number to be squared.
 * @return {number} The square of the input number.
 */
function square(n) {
    return n * n;
}

var num = 4;
var squared = square(num); // Get the square of num

console.log(squared); // Output the result

Dans l'exemple ci-dessus, les commentaires ne sont utilisés que là où ils sont nécessaires. C'est une bonne pratique pour rendre votre code propre.

4. Écrire des fonctions qui ne font qu'une seule chose
Lorsque vous écrivez des fonctions, ne leur ajoutez pas trop de responsabilités. Suivez le principe de responsabilité unique (SRP). Cela rend la fonction plus facile à comprendre et simplifie l'écriture de tests unitaires.

Règles de fonctions

1. Gardez-le petit.
2. Fais une chose.
3. Utilisez des noms descriptifs.
4. Préférez moins d'arguments.
5. Méthode divisée en plusieurs méthodes indépendantes pouvant être appelées depuis le client.

Exemple

async function fetchDataAndProcess(url) {
    // Fetches data from an API and processes it in the same function
    try {
        const response = await fetch(url);
        const data = await response.json();

        // Process data (e.g., filter items with value greater than 10)
        const processedData = data.filter(item => item.value > 10);

        console.log(processedData);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Usage
const apiUrl = 'https://api.example.com/data';
fetchDataAndProcess(apiUrl);

Dans l'exemple ci-dessus, nous pouvons voir une fonction qui récupère des données à l'aide d'une API et les traite. Cela peut être fait par une autre fonction. Actuellement, la fonction de traitement des données est très réduite, mais dans un projet de production, le traitement des données peut être très complexe. À ce moment-là, ce n’est pas une bonne pratique de conserver cela dans la même fonction. Cela rendra votre code complexe et difficile à comprendre en une seule fois.
Voyons la version propre de ceci.

Code amélioré

async function fetchData(url) {
    // Fetches data from an API
    try {
        const response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

function processData(data) {
    // Processes the fetched data (e.g., filter items with value greater than 10)
    return data.filter(item => item.value > 10);
}

// Usage
const apiUrl = 'https://api.example.com/data';

fetchData(apiUrl)
    .then(data => {
        const processedData = processData(data);
        console.log(processedData);
    })
    .catch(error => {
        console.error('Error:', error);
    });

Dans cet exemple, les responsabilités sont séparées : la fonction fetchData gère l'appel d'API et la fonction processData gère le traitement des données. Cela rend le code plus facile à comprendre, à maintenir et à tester.

5. Évitez la duplication de code (Suivez le principe DRY - Ne vous répétez pas)

Pour améliorer la maintenabilité et la propreté du code, efforcez-vous de créer des fonctions réutilisables ou de réutiliser le code existant autant que possible. Par exemple, si vous récupérez des données d'une API pour les afficher sur une page, vous écririez une fonction qui récupère les données et les transmet à un moteur de rendu pour l'affichage de l'interface utilisateur. Si les mêmes données doivent être affichées sur une autre page, au lieu de réécrire la même fonction, vous devez déplacer la fonction vers un fichier utilitaire. Cela vous permet d'importer et d'utiliser la fonction dans les deux cas, favorisant ainsi la réutilisabilité et la cohérence dans votre base de code.

Autres règles générales pour l'écriture de code propre

• Suivez les conventions standard (pour JavaScript Camel Case).
• Restez simple, stupide. Plus simple est toujours mieux. Réduisez la complexité autant que possible.
• Règle des scouts. Laissez le terrain de camping plus propre que vous ne l'avez trouvé.
• Trouvez toujours la cause première. Recherchez toujours la cause profonde d’un problème.
• Écrivez du code facile à comprendre

Mettez en œuvre ces pratiques et principes à partir d'aujourd'hui pour écrire du code propre.