Conventions de nommage JavaScript : Variables, fonctions, classes et plus

Les conventions de nommage JavaScript ne sont pas imposées par le langage, mais sont universellement suivies dans l'écosystème. Ce guide couvre tout ce que chaque développeur JavaScript et TypeScript devrait savoir.

Variables et fonctions : camelCase

Variables, fonctions et noms de méthodes utilisent le camelCase — le premier mot en minuscule, les mots suivants avec majuscule initiale :

const userName = "Alice";
let totalPrice = 0;

function getUserById(id) { /* ... */ }
const calculateShipping = (weight) => weight * 2.5;

Classes et composants : PascalCase

Classes, composants React et fonctions constructeurs utilisent le PascalCase :

class UserAccount { /* ... */ }
class HttpClient { /* ... */ }

// Composants React
function UserProfile({ name }) { /* ... */ }
const ShoppingCart = () => { /* ... */ };

Constantes : SCREAMING_SNAKE_CASE

Les vraies constantes — valeurs qui ne changent jamais et sont connues à la compilation — utilisent les majuscules avec des underscores :

const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";
const DEFAULT_PAGE_SIZE = 20;

Note : toute variable const n'est pas une « constante » dans ce sens. const user = getUser() est une variable normale — utilisez le camelCase.

Variables booléennes

Préfixez les booléens avec is, has, can, should pour plus de clarté :

const isLoading = true;
const hasPermission = false;
const canEdit = user.role === "admin";
const shouldRedirect = !isAuthenticated;

Champs privés

Le JavaScript moderne utilise le préfixe # pour les champs de classe véritablement privés. L'ancienne convention avec underscore (_name) est encore courante dans les bibliothèques :

class User {
  #password;
  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }
}

Noms de fichiers

Type	Convention	Exemple
Composant React	PascalCase	UserProfile.tsx
Module utilitaire	camelCase	dateUtils.ts
Fichier de config	kebab-case	eslint-config.js
Fichier de test	Identique à la source	UserProfile.test.tsx
Module CSS	PascalCase ou kebab	UserProfile.module.css

Spécificités TypeScript

• Interfaces : PascalCase, sans préfixe I. UserProps, pas IUserProps.
• Type aliases : PascalCase. type ApiResponse = { ... }
• Enums : PascalCase pour l'enum et pour les membres. enum Color { Red, Green, Blue }
• Génériques : Une seule lettre majuscule. T, K, V

Gestionnaires d'événements React

Préfixez les fonctions de gestion d'événements avec handle, et les props avec on :

// Props : onSubmit, onClick, onChange
// Handlers : handleSubmit, handleClick, handleChange
<Button onClick={handleSubmit} />

Convertir aux conventions JavaScript

Vous travaillez avec une API Python qui retourne du snake_case ? Utilisez notre convertisseur camelCase pour transformer les clés. Besoin de nommer un composant React ? Essayez le convertisseur PascalCase. Comparez tous les formats dans le hub de conversion.