Guide de style JavaScript : Écrire du code propre et cohérent

Salut à toi, futur·e codeur·euse ! Je suis ravi·e de commencer ce voyage avec toi alors que nous explorons le monde des guides de style JavaScript. En tant que quelqu'un qui enseigne la programmation depuis des années, je ne peux insister suffisamment sur l'importance d'écrire un code propre et cohérent. C'est comme maintenir votre chambre en ordre - cela rend tout plus facile à trouver et à gérer !

Pourquoi avons-nous besoin d'un guide de style ?

Avant de plonger dedans, parlons de pourquoi nous avons besoin d'un guide de style. Imaginez que vous travaillez sur un projet de groupe et que chacun écrit son code différemment. Ce serait le chaos ! Un guide de style est comme un ensemble de règles que tout le monde accepte de suivre, ce qui rend le code plus facile à lire et à entretenir.

Maintenant, entrons dans le vif du sujet des directives de style JavaScript !

Indentation du code

H3 : La fondation du code lisible

L'indentation est comme la fondation d'une maison - elle est essentielle pour la structure et la stabilité. En JavaScript, nous utilisons généralement des espaces ou des tabulations pour indenter notre code. Regardons un exemple :

function greetStudent(name) {
if (name) {
console.log("Hello, " + name + "!");
} else {
console.log("Hello, student!");
}
}

Dans cet exemple, nous avons indenté le code à l'intérieur de la fonction et de l'instruction if-else. Cela rend clair quelles parties du code appartiennent ensemble.

Commentaires

H3 : Laisser des indices pour le futur toi

Les commentaires sont comme de petites notes que vous laissez pour vous-même (ou pour d'autres) dans votre code. Ils expliquent ce que fait le code sans affecter comment il s'exécute. Voici comment nous les utilisons :

// Cela est un commentaire sur une seule ligne

/*
Cela est un
commentaire sur plusieurs lignes
*/

/**
* Cela est un commentaire JSDoc
* Il est utilisé pour documenter les fonctions
* @param {string} name - Le nom de l'étudiant
*/
function greetStudent(name) {
// Code ici
}

Souvenez-vous, de bons commentaires expliquent pourquoi, pas ce que fait le code. Le code lui-même devrait être suffisamment clair pour montrer ce qu'il fait.

Déclaration de variables

H3 : Présenter les personnages de votre code

Les variables sont comme les personnages dans l'histoire de votre code. En JavaScript, nous avons plusieurs manières de les déclarer :

// Utiliser 'let' pour les variables qui peuvent changer
let age = 25;

// Utiliser 'const' pour les variables qui ne changeront pas
const PI = 3.14159;

// Éviter d'utiliser 'var' dans le JavaScript moderne
// var oldWay = "Nous ne faisons plus cela";

Toujours déclarez vos variables avant de les utiliser, et essayez d'utiliser const sauf si vous savez que la valeur va changer.

Noms d'identifiants en camelCase

H3 : Des conventions de nommage sensées

En JavaScript, nous utilisons camelCase pour la plupart de nos identifiants. C'est comme coller des mots ensemble, mais en mettant en majuscule chaque nouveau mot (sauf le premier). Voici comment cela apparaît :

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

function calculateArea(width, height) {
return width * height;
}

const MAX_SIZE = 100; // Exception : les constantes sont souvent en MAJUSCULES

Espaces et accolades

H3 : Donner de l'espace à votre code pour respirer

Un espacement adéquat rend votre code plus lisible. C'est comme ajouter des paragraphes à un long essai. Voyons comment nous utilisons les espaces et les accolades :

// Bon espacement
if (condition) {
doSomething();
} else {
doSomethingElse();
}

// Appels de fonctions
console.log("Hello, World!");

// Tableaux et objets
let colors = ["red", "green", "blue"];
let person = { name: "Alice", age: 30 };

Notez comment nous utilisons des espaces autour des opérateurs et après les virgules. Ce sont ces petits détails qui rendent votre code professionnel !

Règles pour les objets

H3 : Structurer vos données

Les objets sont comme des conteneurs pour des données liées. Voici comment nous les structurons généralement :

const student = {
name: "Bob",
age: 20,
grades: {
math: 90,
science: 85
},
isEnrolled: true
};

// Accès aux propriétés de l'objet
console.log(student.name);
console.log(student["age"]);

Gardez vos propriétés d'objet cohérentes et bien organisées. Ça vous évitera des maux de tête plus tard !

Règles pour les instructions

H3 : Une pensée, une ligne

En général, nous essayons de garder chaque instruction sur sa propre ligne. C'est comme écrire des phrases dans un essai - chacune devrait exprimer une pensée complète :

let a = 5;
let b = 10;
let c = a + b;

if (c > 10) {
console.log("c est supérieur à 10");
}

Cela rend votre code plus lisible et plus facile à déboguer.

Longueur des lignes

H3 : Garder les choses compactes

Essayez de garder vos lignes de code à une longueur raisonnable - généralement autour de 80-100 caractères. Si une ligne devient trop longue, cassez-la :

// Trop long
let result = veryLongFunctionName(extremelyLongVariableName1, extremelyLongVariableName2, extremelyLongVariableName3);

// Meilleur
let result = veryLongFunctionName(
extremelyLongVariableName1,
extremelyLongVariableName2,
extremelyLongVariableName3
);

Cela améliore la lisibilité et rend votre code plus soigné.

Mettre tout ensemble

Maintenant que nous avons couvert toutes ces directives de style, regardons un exemple complet qui met tout en pratique :

/**
* Calcule le prix total des articles dans un panier d'achat
* @param {Object[]} items - Tableau des articles dans le panier
* @returns {number} Prix total
*/
function calculateTotalPrice(items) {
let total = 0;
const TAX_RATE = 0.08;

for (let i = 0; i < items.length; i++) {
let item = items[i];
let itemPrice = item.price * (1 + TAX_RATE);

total += itemPrice;

// Logger le prix de chaque article avec la taxe
console.log(`${item.name}: $${itemPrice.toFixed(2)}`);
}

return total.toFixed(2);
}

// Exemple d'utilisation
const shoppingCart = [
{ name: "T-shirt", price: 15.99 },
{ name: "Jeans", price: 39.99 },
{ name: "Chaussures", price: 59.99 }
];

let finalPrice = calculateTotalPrice(shoppingCart);
console.log(`Prix total: $${finalPrice}`);

Cet exemple montre une indentation correcte, des commentaires, des déclarations de variables, l'utilisation de camelCase, des espaces, l'utilisation d'objets et l'adhésion aux directives de longueur de ligne.

Souvenez-vous, suivre ces directives de style rendra votre code plus lisible et plus facile à entretenir. C'est une compétence qui vous servira bien tout au long de votre parcours de programmation. Bon codage, et que votre code soit toujours propre et cohérent !

Credits: Image by storyset