Avoir un code lisible et maintenable est essentiel, pour vous et pour votre équipe.

❌ Non, je ne vais pas donner les conseils genre...

Met des commentaires dans ton code gnegne

J'ai envie de vous partager 4 habitudes simples à prendre afin de faire de vous un meilleur développeur. Faire ce que je propose ici le plus tôt possible permettra de changer votre façon de coder durablement et de produire un meilleur code.

C'est parti 😎

1. Consistant (Cohérent)

J'ai appris ceci avec le temps, être consistant, c'est très important, et c'est simple. Décider de faire comme-ci et s'y tenir. Ne jamais y renoncer.

Peu importe ta syntaxe actuelle, si tu en utilises une différente, ton code est plus compliqué à lire.

Deux exemples :

En JS, tu peux utiliser deux syntaxes différentes pour créer une fonction. Peu importe celle que tu choisis, utilises la partout, LA MÊME.

N'invente pas des règles genre : "Ah alors pour faire un composant React utilise une regular function et pour les hooks bah une arrow function"

Nonnonnonononn, je le faisais et certes, il est mieux d'être consistant.

// Uniquement arrow function
const arrowFunction = () => {
  console.log('Hello !');
};
// Ou uniquement regular function
function regularFunction() {
  console.log('Hello !');
}

Pour ce genre de cas, tu peux ajouter une règle ESLint afin que toi et ton équipe puissiez faire pareil.

Par exemple :

{
  "rules": {
    "func-style": ["error", "expression"]
  }
}

Deuxièmement pour les Types en TypeScript. Dans mon article concernant les types je conseille d'en choisir 1 et de s'y tenir.

Pas faire cohabiter les deux sans avoir de règles précises.

// Uniquement Type
type User = {
  username: string;
};
// Ou un maximum interface (car certaine fois c'est pas possible)
interface User {
  username: string;
}

2. Retourner rapidement (early return)

C'est l'erreur la plus commune que je vois chez les Juju, et franchement ça vous fait encore plus galérer.

On appelle ça le "early return" et la règle est simple :

Retourne le plus tôt possible ! Alias Fail fast.

Ton code devient beaucoup plus lisible, tu sais que s'il arrive à la fin, c'est que tout s'est bien passé !

Tu n'as pas une indentation bancale où trouver le code devient compliqué.

Tu peux te dire que chaque fois que tu écris ELSE c'est qu'il faut chercher un early return ou refactor

// ❌ Pas bien
const getValidPseudo = () => {
  const pseudo = prompt('Ton pseudo :');

  if (pseudo) {
    if (pseudo.length > 3 && pseudo.length < 18) {
      return pseudo;
    } else {
      alert('Ton pseudo doit faire entre 3 et 18 caractères');
      return null;
    }
  } else {
    alert('Pas de pseudo');
    return null;
  }
};

Le cas où "tout se passe bien" est dans le second if. Pas facile à lire n'est-ce-pas ?

Pour résoudre ce problème, j'ai inversé les conditions et jereturn dans les conditions où il y a des erreurs !

// ✅ Bien
const getValidPseudo = () => {
  const pseudo = prompt('Ton pseudo :');

  if (!pseudo) {
    alert("Tu n'as pas mis de pseudo !");
    return;
  }

  if (pseudo.length < 3 || pseudo.length > 18) {
    alert('Ton pseudo doit faire entre 3 et 18 caractères');
    return;
  }

  return pseudo;
};

Pour comprendre schématiquement comment ça fonctionne :

Tu vois que la fonction est plate, et chaque cas qui pose un problème le code return. La lisibilité du code et la maintenabilité sont largement améliorées.

3. Avoir un code explicite

Beaucoup de gourou du web vous diront qu'il faut commenter son code un maximum.

Je ne suis pas d'accord avec eux. Si le code est explicite, tu n'as pas besoin de le commenter, car littéralement ton code parle de lui-même. Il vaut mieux avoir un nom de fonction à 20 caractères que 8 caractères par clair et 1 commentaire.

Même dans l'utilisation de ta fonction, tu comprendras exactement ce qu'elle fait.

Dans le premier Code (❌ Pas bien) on a une fonction qui :

• récupère le username
• le valide
• et le sauvegarde dans le local Storage
• return le username

// ❌ Pas bien
function getUsername() {
  const username = prompt(`Ton username`);

  if (!username) {
    alert("Tu n'as pas mis de username !");
    return;
  }

  if (username.length < 3 || username.length > 18) {
    alert('Ton username doit faire entre 3 et 18 caractères');
    return;
  }

  if (localHighScore === null) {
    return username;
  }

  const usernames = JSON.parse(localStorage.getItem('usernames'));
  usernames.push(username);
  localStorage.setItem(JSON.stringify(usernames));

  return username;
}

const username = getUsername();

Ouah cette fonction fait beaucoup de choses... Comment s'appelle-t-elle ?

getUsername ? Si tu lis juste son nom, que fait-elle pour toi ?

Si la réponse n'est pas ce qui est noté ci-dessus c'est qu'il y a une erreur quelque part ! Le nom de ta fonction devrait expliciter ce qu'elle fait (à la limite du raisonnable).

Ensuite, cette fonction, doit-elle nécessairement faire la sauvegarde du username dans le local storage ? Je ne pense pas.

Voici comment j'ai amélioré ce code :

// ✅ Bien
function getValidUsername() {
  // Ajout de valid car on fait des checks
  const username = prompt(`Ton username`);

  if (!username) {
    alert("Tu n'as pas mis de username !");
    return;
  }

  if (username.length < 3 || username.length > 18) {
    alert('Votre username doit contenir entre 3 et 18 caractères.');
    return;
  }

  return username;
}

const saveUsernameInLocalStorage = (username) => {
  const usernames = JSON.parse(localStorage.getItem('usernames'));
  usernames.push(username);
  localStorage.setItem(JSON.stringify(usernames));
};

const username = getValidUsername();
saveUsernameInLocalStorage(username);

La première étape et de la nommer getValidUsername pour préciser que l'on va vérifier certaines choses. J'ai séparé le code pour le sauvegarder dans le local storage dans une fonction saveUsernameInLocalStorage

Que j'utilise par la suite.

Maintenant juste avec les ces deux lignes :

const username = getValidUsername();
saveUsernameInLocalStorage(username);

On sait :

• le pseudo est récupéré et il est valide
• le pseudo est sauvegardé dans le local storage

Il n'y a plus aucun doute. Il vaut mieux trop nommer que pas assez et séparer son code pour le rendre explicite.

4. Éviter la répétition

Un code qui se répète deux fois est interdit. Tu dois habituer ton cerveau à toutes les remarquer et supprimer toutes les répétitions.

Quand tu répètes un code deux fois : ALARM !!!!!

TU DOIS REFACTOR HéHO !

Prenons un exemple :

// ❌ Pas bien
const getUser = () => {
  const user = localStorage.getItem('user');
  if (!user) {
    return null;
  }

  try {
    return JSON.parse(user);
  } catch (e) {
    return null;
  }
};

const getCategories = () => {
  const categories = localStorage.getItem('categories');
  if (!categories) {
    return null;
  }

  try {
    return JSON.parse(categories);
  } catch (e) {
    return null;
  }
};

En 2 secondes, tu vois qu'il y a du code répété. Notamment la gestion du JSON ainsi que le JSON.parse fait dans un try catch. Ici, ils sont à côté mais dans une vraie app, ils sont peut-être dans un autre fichier.

On peut facilement séparer la logique du JSON ainsi que le try/catch dans une autre fonction et l'utiliser pour les deux cas.

// ✅ Bien
const getUser = () => {
  return localStorageSafeGetItem('user');
  return user;
};

const getCategories = () => {
  return localStorageSafeGetItem('categories');
};

const localStorageSafeGetItem = (key) => {
  const item = localStorage.getItem(key);
  if (!item) {
    return null;
  }
  try {
    return JSON.parse(item);
  } catch (e) {
    return null;
  }
};

💥 Boom quel code plus clair. Si à l'avenir, tu as envie de changer, tu as un seul endroit pour modifier toutes les sauvegardes du local storage.

Conclusion

En étant consistant, en retournant rapidement, en ayant un code explicite et en évitant les répétitions, tu vas avoir un meilleur code, plus maintenable.

Le mieux c'est de prendre les habitudes dès aujourd'hui pour ne pas devoir les prendre plus tard.

La clé, c'est d'être rigoureux 🔑 !

Écris par Melvyn Malherbe

J'ai aidé 200 personnes à apprendre React et Next.js. Je suis un créateur de contenu et un développeur web. Plus de 2'600 personnes reçoivent mes newsletter par email chaque semaine.

En apprendre plus à propos de moi