Clean Code en JavaScript : principes et exemples pour débutants

Clean Code en JavaScript : principes et exemples pour débutants

Le code propre (Clean Code) n'est pas seulement un concept à la mode, mais une compétence fondamentale pour tout développeur professionnel. Dans le monde de JavaScript (notamment dans l'environnement Node.js), le code s'écrit rapidement, mais le maintenir sans principes clairs devient un véritable cauchemar. Cet article s'adresse aux débutants qui souhaitent écrire non seulement un code fonctionnel, mais aussi un code beau, lisible et évolutif.

Le code propre est un code facile à lire, facile à modifier et facile à tester. Il ne donne pas envie de le réécrire entièrement. Analysons les principes de base avec des exemples pratiques.

1. Nommage des variables et des fonctions : dites la vérité

La règle la plus simple et en même temps la plus complexe est que le nom doit refléter l'essence. N'économisez pas les caractères, économisez du temps de compréhension.

Mauvais (peu clair) :

const d = new Date();\nconst arr = ['apple', 'banana', 'grape'];\nconst fn = (x) => x * 2;

Bon (lisible) :

const currentDate = new Date();\nconst fruitList = ['apple', 'banana', 'grape'];\nconst doubleValue = (value) => value * 2;

Règles de nommage :

\n
• Variables — des noms (user, productList, errorMessage).
\n
• Fonctions — des verbes (getUser, calculateTotal, validateEmail).
\n
• Valeurs booléennes — commencez par is, has, should (isActive, hasPermission, shouldUpdate).
\n
• Évitez les nombres magiques — placez-les dans des constantes.
\n

// Mauvais\nconst t = 3600000; // Quel est ce nombre ?\n\n// Bon\nconst MILLISECONDS_IN_AN_HOUR = 3600000;\nconst timeout = MILLISECONDS_IN_AN_HOUR;

2. Fonctions : une étape — une action

Le principe de responsabilité unique (Single Responsibility Principle) s'applique également aux fonctions. Une fonction doit faire une seule chose et la faire bien.

Mauvais (fait tout à la fois) :

function processUserData(user) {\n    const fullName = `${user.firstName} ${user.lastName}`;\n    const email = user.email.toLowerCase();\n    const isValid = email.includes('@');\n    \n    if (isValid) {\n        const result = { fullName, email };\n        saveToDatabase(result);\n        sendWelcomeEmail(email);\n        return result;\n    } else {\n        throw new Error('Invalid email');\n    }\n}

Bon (divisé en petites fonctions) :

function buildFullName(firstName, lastName) {\n    return `${firstName} ${lastName}`;\n}\n\nfunction normalizeEmail(email) {\n    return email.toLowerCase().trim();\n}\n\nfunction isValidEmail(email) {\n    return email.includes('@');\n}\n\nfunction processUserData(user) {\n    const fullName = buildFullName(user.firstName, user.lastName);\n    const email = normalizeEmail(user.email);\n    \n    if (!isValidEmail(email)) {\n        throw new Error('Invalid email');\n    }\n    \n    const result = { fullName, email };\n    saveToDatabase(result);\n    sendWelcomeEmail(email);\n    \n    return result;\n}

Un tel code est facile à tester, facile à modifier et facile à comprendre.

3. Gestion de la complexité : évitez les imbrications profondes

Les imbrications profondes de if et for sont l'ennemi de la lisibilité. Utilisez le retour précoce (early return) et les Guard Clauses.

Mauvais (enfer profond) :

function processOrder(order) {\n    if (order) {\n        if (order.isPaid) {\n            if (order.items.length > 0) {\n                // ... 50 lignes de code\n            }\n        }\n    }\n}

Bon (structure plate) :

function processOrder(order) {\n    if (!order) {\n        return;\n    }\n