camelCase

Définition

camelCase (aussi orthographié camel case ou camel-case) est une convention de nommage en programmation qui consiste à écrire plusieurs mots accolés sans espace, en mettant une majuscule à la première lettre de chaque mot : sauf le premier, qui reste en minuscule. Exemples : nomDeVariable, calculerPrixTotal, isLoading.

Le nom vient de l’anglais camel (chameau) : les majuscules intercalées dans un mot rappellent visuellement les bosses de l’animal. C’est la convention de nommage la plus répandue en JavaScript, Java, Swift et Kotlin pour les variables, fonctions et propriétés d’objet.

J’ai mis du temps à saisir pourquoi cette convention existe vraiment. Ce n’est pas une question d’esthétique : c’est une question de lisibilité à l’échelle. Quand tu lis 50 000 lignes de code JavaScript, la différence entre nomdeutvariable et nomDeVariable est la différence entre une migraine et une lecture fluide.

lowerCamelCase vs UpperCamelCase

Le terme camelCase regroupe strictement deux variantes :

Dans cet article, quand je dis “camelCase” sans précision, je parle du lowerCamelCase : la variante JavaScript. L’UpperCamelCase (PascalCase) est une convention à part entière, avec sa propre page dédiée.

Exemples en JavaScript, la vraie maison du camelCase

JavaScript est le territoire naturel du camelCase. Chaque variable, chaque fonction, chaque propriété d’objet : lowerCamelCase par défaut.

// Variables (lowerCamelCase
let nomUtilisateur = "Marie";
let prixTotalHT = 149.90;
let estConnecte = true;
let nombreArticlesParier = 3;

// Fonctions) lowerCamelCase
function calculerPrixTotal(prixHT, tauxTVA) {
  return prixHT * (1 + tauxTVA);
}

const handleSubmit = (event) => {
  event.preventDefault();
};

// Propriétés d'objet JSON : lowerCamelCase standard
const commandeClient = {
  nomUtilisateur: "Marie Dupont",
  montantTotal: 149.90,
  estPayee: false,
  dateCreation: new Date()
};

Un client m’a envoyé un fichier JSON l’an dernier avec des clés en snake_case (nom_utilisateur, montant_total) mélangées avec du camelCase (dateCreation). Le code JavaScript qui le consommait était un désastre. Deux conventions dans le même fichier : c’est le genre d’erreur qui coûte des heures de debug pour rien. Une convention par projet, et on s’y tient.

camelCase en Java

// Java (lowerCamelCase pour variables, méthodes et paramètres
public class CommandeService {

  // Variable d'instance) lowerCamelCase
  private double prixTotal;

  // Méthode (lowerCamelCase
  public double calculerPrixTotal(double prixHT, double tauxTVA) {
    return prixHT * (1 + tauxTVA);
  }

  // Paramètres) lowerCamelCase
  public void ajouterArticle(String nomArticle, int quantite) {
    // ...
  }
}

// Classe : UpperCamelCase (PascalCase), pas lowerCamelCase
public class CommandeService { }  // PascalCase
public class ArticlePanier { }    // PascalCase

camelCase en React : les deux conventions dans un même fichier

React est l’endroit où les deux variantes coexistent dans le même fichier, et c’est là que la confusion explose chez les débutants. La règle est simple une fois qu’on la voit :

Le digital en 5 minutes.

Chaque mardi : SEO, social ads, IA, veille. Sans détour.

Adresse email

En vous inscrivant, vous acceptez de recevoir le Brief Digital Hebdo. Désinscription en 1 clic. Politique de confidentialité

// UpperCamelCase (PascalCase) (NOM DU COMPOSANT
function CarteProduit({ titre, prix, image }) {

  // lowerCamelCase) variables et handlers internes
  const [estAjoute, setEstAjoute] = useState(false);

  const handleAjoutPanier = () => {
    setEstAjoute(true);
  };

  // Propriétés JSX : lowerCamelCase (onClick, className, onChange)
  return (
    <div className="carte-produit">
      <img src={image} alt={titre} />
      <h2>{titre}</h2>
      <span>{prix} €</span>
      <button onClick={handleAjoutPanier}>
        {estAjoute ? 'Ajouté ✓' : 'Ajouter au panier'}
      </button>
    </div>
  );
}

// ❌ Erreur classique : composant en lowerCamelCase
function carteProduit() { } // React l'interprète comme balise HTML

Tu as déjà vu cette erreur ? Le composant ne s’affiche pas, pas de message d’erreur explicite : juste une balise HTML inconnue dans le DOM. La première fois, on cherche pendant 20 minutes. Après, on ne l’oublie plus.

camelCase vs les autres conventions

Mon avis sur la question, et j’assume : le camelCase est la convention la mieux calibrée pour la lisibilité à l’œil. Le kebab-case est lisible mais illisible en JS (le tiret est un opérateur). Le snake_case est confortable mais prend de la place. Le camelCase est le point d’équilibre.

Pour aller plus loin

• PascalCase : la convention complémentaire pour les classes et composants
• UpperCamelCase : le synonyme technique de PascalCase, privilégié dans les docs C# et TypeScript
• kebab-case : la convention pour les URLs, slugs et classes CSS
• Notre expertise e-commerce : architecture technique et développement WordPress/WooCommerce