Le guide ultime des conventions de nommage JavaScript

Lorsqu’on a plusieurs membres qui travaillent sur un projet, il est indispensable d’avoir une certaine norme à suivre dans un souci d’évolutivité.

Aujourd’hui, nous allons parler de la norme la plus basique, les conventions de nommage : ce que nous devrions faire et ne pas faire.

Débutons.

// Don’t
function fetchData() {}// Do
function fetchUsers() {}

Nous savons que fetchData() appellerait une API et tirerait les données du serveur, mais quelles données ? Il est préférable de le nommer de manière plus spécifique, non ? Plus c’est précis, moins vous passerez de temps à réfléchir à la signification des noms sans aucun commentaire.

Évitez les noms d’une lettre

Sauf pour les noms courants comme i pour index dans les déclarations de boucle, vous devriez éviter les noms d’une lettre car cela vous embrouillera plus tard.

// Don’t
let n = 0;// Do
let number = 0;

Utiliser des noms longs si nécessaire

Bien souvent, nous visons des noms courts. Dans certains cas, cependant, pour être plus clair et plus descriptif, un nom long ne devrait pas être un problème.

// Don’t
function findBooks() {}// Do
function findBooksByAuthor() {}

Variables

Écrire un commentaire juste pour une définition de variable est plus probablement redondant. Le nom d’une variable doit être descriptif afin que, lorsque vous la regardez, vous sachiez exactement à quoi elle sert.

// Don’t
let d = ‘01/01/2021’;
let number = 28;// Do
let date = ‘01/01/2021’;
let age = 28;

Il existe de nombreux styles de nommage, cependant, vous devriez utiliser la casse camel pour plus de cohérence.

// Don’t
let book_title = ‘JavaScript’;
let BOOKTITLE = ‘JavaScript’;
let booktitle = ‘JavaScript’;// Do
let bookTitle = ‘JavaScript’;

Constantes

Les constantes en JavaScript ne peuvent pas être modifiées. Pour se séparer des autres variables, toutes les lettres d’une constante doivent être en MAJUSCULES.

// Don’t
const pi = 3.14;// Do
const PI = 3.14;

Booléens

Un booléen est comme une question oui/non :

• Est-il lu ?
• L’avez-vous fait ?
• Est-ce que c’est égal?

Donc la façon dont vous nommez une variable booléenne devrait être similaire à ces questions.

// Don’t
let decoration = true;
let red = true;
let visible = false;// Do
let hasDecoration = true;
let isRed = true;
let isVisible = false;

Fonctions

Vous appelez une fonction lorsque vous voulez effectuer une action. Ainsi, le nom d’une fonction doit être commencé par un verbe.

// Don’t
function data() {}// Do
function fetchData() {}

Vous devez privilégier des verbes cohérents plutôt que d’être créatif pour le même concept.

// Don’t
function getUsers() {}
function fetchBooks() {}
function retriveAuthors() {}// Do
function fetchUsers() {}
function fetchBooks() {}
function fetchAuthors() {}

Classes

Comme les autres langages de programmation, la dénomination d’un nom de classe doit suivre la PascalCase et un nom de classe doit être un nom.

// Don’t
class mobileDevice {}// Do
class MobileDevice {}

Fichiers

Pour les fichiers JavaScript, nous avons deux styles de nommage courants : kebab-case et PascalCase.

kebab-case:

-components/
--product/
---product-details.js
---product-list.js

PascalCase:

-components/
--product/
---ProductDetails.js
---ProductList.js

Vous pouvez utiliser l’un ou l’autre. Pour ma part, j’opte pour kebab-case.

Composants (React)

Ceci est spécifique à React. Nous devrions utiliser PascalCase pour les noms de composants.

// Don’t
class profilePicture extends React.Component {
render() {
return <h1>Profile Picture</h1>;
}
}// Do
class ProfilePicture extends React.Component {
render() {
return <h1>Profile Picture</h1>;
}
}

Conclusion

C’est tout ce que vous devez savoir sur les conventions de nommage en JavaScript. Vous pouvez ajouter cette liste utile à vos favoris et vous y référer plus tard si nécessaire.

J’espère que cet article vous a plu.