JavaScript-Namenskonventionen: Variablen, Funktionen, Klassen & mehr

JavaScripts Namenskonventionen werden von der Sprache nicht erzwungen, aber im gesamten Ökosystem universell befolgt. Dieser Guide deckt alles ab, was jeder JavaScript- und TypeScript-Entwickler wissen sollte.

Variablen und Funktionen: camelCase

Variablen, Funktionen und Methodennamen verwenden camelCase — das erste Wort ist kleingeschrieben, nachfolgende Wörter werden großgeschrieben:

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

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

Klassen und Komponenten: PascalCase

Klassen, React-Komponenten und Konstruktorfunktionen verwenden PascalCase:

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

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

Konstanten: SCREAMING_SNAKE_CASE

Echte Konstanten — Werte, die sich nie ändern und zur Kompilierzeit bekannt sind — verwenden Großbuchstaben mit Unterstrichen:

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

Hinweis: Nicht jede const-Variable ist in diesem Sinne eine „Konstante". const user = getUser() ist eine reguläre Variable — verwenden Sie camelCase.

Boolean-Variablen

Versehen Sie Booleans mit den Präfixen is, has, can, should für Klarheit:

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

Private Felder

Modernes JavaScript verwendet den #-Präfix für echte private Klassenfelder. Die ältere Unterstrich-Konvention (_name) ist in Bibliotheken noch üblich:

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

Dateinamen

Typ	Konvention	Beispiel
React-Komponente	PascalCase	UserProfile.tsx
Utility-Modul	camelCase	dateUtils.ts
Config-Datei	kebab-case	eslint-config.js
Testdatei	Wie Quelldatei	UserProfile.test.tsx
CSS-Modul	PascalCase oder kebab	UserProfile.module.css

TypeScript-Besonderheiten

• Interfaces: PascalCase, kein I-Präfix. UserProps, nicht IUserProps.
• Type-Aliases: PascalCase. type ApiResponse = { ... }
• Enums: PascalCase für das Enum, PascalCase für Mitglieder. enum Color { Red, Green, Blue }
• Generics: Einzelner Großbuchstabe. T, K, V

Event-Handler in React

Event-Handler-Funktionen erhalten den Präfix handle, Props den Präfix on:

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

In JavaScript-Konventionen konvertieren

Arbeiten Sie mit einer Python-API, die snake_case zurückgibt? Verwenden Sie unseren camelCase-Konverter für die Schlüssel-Transformation. Brauchen Sie einen Namen für eine React-Komponente? Probieren Sie den PascalCase-Konverter. Vergleichen Sie alle Formate im Konvertierungs-Hub.