Bonnes pratiques [Introduction à JavaScript]

Bonnes pratiques

Objectif

Connaître les bonnes pratiques d'écriture de code JavaScript.

Mise en situation

Il existe des bonnes pratiques pour chaque langage de programmation. Les bonnes pratiques sont des règles d'écriture du code qui ne sont pas imposées par le langage. Elles sont considérées comme importantes par la communauté. Il est fortement recommandé de se renseigner et de suivre les bonnes pratiques des langages qu'on utilise, qui servent généralement à améliorer la lisibilité du code source. De plus, cela permet d'avoir un style de code commun au sein d'une équipe, ou même d'une communauté, et ainsi de faciliter la collaboration.

Fondamental : Référence

Des bonnes pratiques populaire de JavaScript sont regroupées ici : https://standardjs.com/rules-fr.html#javascript-standard-style.

Méthode : Chaînes de caractère

Les chaînes de caractères doivent être entourées d'apostrophes. Les guillemets ne sont utilisés que si la chaîne contient elle-même une apostrophe.

Exemple :

console.log("Hello World") // ✗ non
console.log('Hello World') // ✓ ok
console.log("Sans l'apostrophe") // ✓ ok

console.log("Hello World") // ✗ non

console.log('Hello World') // ✓ ok
console.log("Sans l'apostrophe") // ✓ ok

Méthode : Variables

Toutes les variables doivent être déclarées.
On privilégie const à let si la variable est une constante.
Toutes les variables qui sont déclarées doivent forcément être utilisées à un moment dans le programme.

Exemple :

const useless = 'Null' // ✗ non
const useful = 'Hi' // ✓ ok
console.log(useful)

const useless = 'Null' // ✗ non

const useful = 'Hi' // ✓ ok
console.log(useful)

Méthode : Espacements

Les mots clés, les opérateurs, les accolades, les virgules, etc., doivent être espacés.

Exemple :

// ✗ mauvaises pratiques
const color1='blanc'
let flower1='jasmin'
if(color1==='rose'){flower1='rose'}
console.log(flower1)
// ✓ bonnes pratiques
const color2 = 'rouge'
let flower2 = 'tulipe'
if (color2 === 'jaune') {
  flower2 = 'mimosa'
}
console.log(flower2)

// ✗ mauvaises pratiques
const color1='blanc'
let flower1='jasmin'
if(color1==='rose'){flower1='rose'}
console.log(flower1)

// ✓ bonnes pratiques
const color2 = 'rouge'
let flower2 = 'tulipe'
if (color2 === 'jaune') {
  flower2 = 'mimosa'
}
console.log(flower2)

Méthode : Casse

La convention camelCase est privilégiée en JavaScript.

Méthode : Anglais

Le nom des variables, des fonctions, etc., doit être en anglais.
Les commentaires doivent de préférence être en anglais (sauf si tous les développeurs préfèrent une autre langue).
Les valeurs (chaînes de caractères) sont bien entendu dans la langue requise par le programme.

À retenir

Il est important de se référer aux bonnes pratiques qui permettent de produire un code propre et lisible par tous.