JavaScript-Namenskonventionen

Eine Einführung in die JavaScript-Namenskonventionen anhand eines Beispiels – das Ihnen den gesunden Menschenverstand vermittelt, wenn es um die Benennung von Variablen, Funktionen, Klassen oder Komponenten in JavaScript geht. Niemand erzwingt diese Namenskonventionen, sie sind jedoch in der JS-Gemeinschaft weithin als Standard akzeptiert.

JavaScript-Namenskonventionen: Variablen

JavaScript-Variablen sind case sensitive. Daher unterscheiden sich JavaScript-Variablen mit Klein- und Großbuchstaben:

 var name = 'Robin Wieruch'; 
 
 var Name = 'Dennis Wieruch'; 
 
 var NAME = 'Thomas Wieruch'; 
 
 console.log(name); 
 // "Robin Wieruch" 
 
 console.log(Name); 
 // "Dennis Wieruch" 
 
 console.log(NAME); 
 // "Thomas Wieruch" 
Eine JavaScript-Variable sollte selbstbeschreibend sein. Es sollte nicht notwendig sein, einen Kommentar zur zusätzlichen Dokumentation der Variable hinzuzufügen:
 // bad 
 var value = 'Robin'; 
 
 // bad 
 var val = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Am häufigsten werden Sie JavaScript-Variablen finden, die mit einem camelCase-Variablennamen mit führendem Kleinbuchstaben deklariert sind:
 // bad 
 var firstname = 'Robin'; 
 
 // bad 
 var first_name = 'Robin'; 
 
 // bad 
 var FIRSTNAME = 'Robin'; 
 
 // bad 
 var FIRST_NAME = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Es gibt Ausnahmen für JavaScript-Konstanten, Privates und Klassen/Komponenten — auf die wir später eingehen werden. Im Allgemeinen wird jedoch eine JavaScript-Variable — eine Zeichenkette, ein boolescher Wert oder eine Zahl, aber auch ein Objekt, ein Array oder eine Funktion — mit einem Variablennamen in CamelCase deklariert.
Ein kurzer Überblick über die verschiedenen Case-Stile:

camelCase (in JS verwendet)
PascalCase (in JS verwendet)
snake_case
kebab-case

 JavaScript-Namenskonventionen: Boolesch
Ein Präfix wie is, are oder has hilft jedem JavaScript-Entwickler, eine boolesche von einer anderen Variable auf den ersten Blick zu unterscheiden:
 // bad 
 var visible = true; 
 
 // good 
 var isVisible = true; 
 
 // bad 
 var equal = false; 
 
 // good 
 var areEqual = false; 
 
 // bad 
 var encryption = true; 
 
 // good 
 var hasEncryption = true; 
Im Gegensatz zu Strings und Integer kann man es als eine weitere weiche Regel für die JavaScript-Namenskonvention für boolesche Variablen ansehen, dass sie in camel case geschrieben werden.
 JavaScript-Namenskonventionen: Funktion
JavaScript-Funktionen werden ebenfalls in camel case geschrieben. Außerdem ist es eine bewährte Praxis, zu sagen, was die Funktion tatsächlich tut, indem man dem Funktionsnamen ein Verb als Präfix gibt.

 // bad 
 function name(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
 
 // good 
 function getName(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
Dieses Verb als Präfix kann alles sein (z.B. get, fetch, push, apply, calculate, compute, post). Es ist eine weitere weiche Regel, die man berücksichtigen sollte, um mehr selbstbeschreibende JavaScript-Variablen zu haben.
 JavaScript-Namenskonventionen: Klasse
Eine JavaScript-Klasse wird im Gegensatz zu anderen JavaScript-Datenstrukturen mit PascalCase deklariert:
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
Jedes Mal, wenn ein JavaScript-Konstruktor aufgerufen wird, um eine neue Instanz einer Klasse zu instanziieren, sollte der Name der Klasse in PascalCase erscheinen, weil die Klasse von vornherein mit PascalCase deklariert wurde.
 JavaScript-Namenskonventionen: Komponente
Komponenten sind nicht überall in JavaScript zu finden, aber häufig in Frontend-Frameworks wie React. Da eine Komponente irgendwie instanziiert wird – aber stattdessen an das DOM angehängt wird – wie eine JavaScript-Klasse, werden sie auch häufig mit Pascal Case deklariert.
 // bad 
 function userProfile(user) { 
 return ( 
 <div> 
 <span>First Name: {user.firstName}</span> 
 <span>Last Name: {user.lastName}</span> 
 </div> 
 ); 
 } 
 
 // good 
 function UserProfile(user) { 
 return ( 
 <div> 
 <span>First Name: {user.firstName}</span> 
 <span>Last Name: {user.lastName}</span> 
 </div> 
 ); 
 } 
Wenn eine Komponente verwendet wird, unterscheidet sie sich von nativen HTML- und Web-Komponenten, weil ihr erster Buchstabe immer in Großbuchstaben geschrieben wird.
 <div> 
 <UserProfile 
 user={{ firstName: 'Robin', lastName: 'Wieruch' }} 
 /> 
 </div> 
 JavaScript-Namenskonventionen: Methoden
Identisch zu JavaScript-Funktionen wird eine Methode einer JavaScript-Klasse mit camelCase deklariert:
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 } 
 
 getName() { 
 return `${this.firstName} ${this.lastName}`; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
 
 console.log(me.getName()); 
 // "Robin Wieruch" 
Hier gelten die gleichen Regeln wie für JavaScript-Funktionen — z.B. das Hinzufügen eines Verbs als Präfix –, um den Methodennamen selbsterklärend zu machen.
 JavaScript-Namenskonventionen: Private
Selten werden Sie in JavaScript einen Unterstrich (_) vor einer Variable/Funktion/Methode finden. Wenn Sie einen sehen, ist er als privat gedacht. Auch wenn es von JavaScript nicht wirklich erzwungen werden kann, sagt die Deklaration von etwas als privat etwas darüber aus, wie es verwendet oder nicht verwendet werden soll.

Zum Beispiel sollte eine private Methode in einer Klasse nur intern von der Klasse verwendet werden, aber es sollte vermieden werden, sie auf der Instanz der Klasse zu verwenden:
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 this.name = _getName(firstName, lastName); 
 } 
 
 _getName(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
 
 // good 
 var name = me.name; 
 console.log(name); 
 // "Robin Wieruch" 
 
 // bad 
 name = me._getName(me.firstName, me.lastName); 
 console.log(name); 
 // "Robin Wieruch" 
Eine private Variable/Funktion kann auch in einer JavaScript-Datei vorkommen. Das kann bedeuten, dass die Variable/Funktion nicht außerhalb dieser Datei verwendet werden soll, sondern nur intern, um weitere Geschäftslogik für andere Funktionen innerhalb derselben Datei zu berechnen.
 JavaScript-Namenskonventionen: Konstante
Zu guter Letzt gibt es in JavaScript Konstanten – das sind nicht veränderliche Variablen -, die in Großbuchstaben (UPPERCASE) geschrieben werden:
 var SECONDS = 60; 
 var MINUTES = 60; 
 var HOURS = 24; 
 
 var DAY = SECONDS * MINUTES * HOURS; 
Wenn eine Variable mehr als ein Wort in ihrem Variablendeklarationsnamen hat, wird ein Unterstrich (_) verwendet:
 var DAYS_UNTIL_TOMORROW = 1; 
Gemäß der Regel werden JavaScript-Konstanten am Anfang einer JavaScript-Datei definiert. Wie bereits angedeutet, ist man hier nicht gezwungen, die Variable zu ändern, außer bei der const-Deklaration der Variable für primitive Datenstrukturen, aber die großgeschriebene Namensgebung legt es nahe, dies zu vermeiden.
 JavaScript-Namenskonventionen: Globale Variable
Eine JavaScript-Variable ist global definiert, wenn ihr gesamter Kontext Zugriff auf sie hat. Oft ist der Kontext durch die JavaScript-Datei definiert, in der die Variable deklariert/definiert ist, in kleineren JavaScript-Projekten kann es aber auch das gesamte Projekt sein. Es gibt keine speziellen Namenskonventionen für globale JavaScript-Variablen.

Eine globale JavaScript-Variable wird am Anfang eines Projekts/einer Datei deklariert.
Eine globale JavaScript-Variable wird in camelCase geschrieben, wenn sie veränderbar ist.
Eine globale JavaScript-Variable wird in UPPERCASE geschrieben, wenn sie nicht veränderbar ist.

 JavaScript-Namenskonventionen: Unterstrich
Was ist nun mit dem Unterstrich und dem Bindestrich in JavaScript-Variablennamen? Da in JS hauptsächlich CamelCase und PascalCase berücksichtigt werden, haben Sie gesehen, dass der Unterstrich nur selten für private Variablen oder Konstanten verwendet wird. Gelegentlich werden Sie Unterstriche finden, wenn Sie Informationen von Drittanbietern wie Datenbanken oder APIs erhalten. Ein weiteres Szenario, in dem Sie einen Unterstrich sehen könnten, sind unbenutzte Funktionsparameter, aber machen Sie sich darüber noch keine Gedanken, wenn Sie sie noch nicht gesehen haben 😉
 JavaScript-Namenskonventionen: Bindestrich
Ein Bindestrich in einer JavaScript-Variablen ist auch nicht unbedingt sinnvoll. Er macht die Dinge nur schwieriger; wie zum Beispiel die Verwendung in einem Objekt:
 // bad 
 var person = { 
 'first-name': 'Robin', 
 'last-name': 'Wieruch', 
 }; 
 
 var firstName = person; 
 
 // good 
 var person = { 
 firstName: 'Robin', 
 lastName: 'Wieruch', 
 }; 
 
 var firstName = person.firstName; 
Es ist sogar nicht möglich, einen Bindestrich direkt für eine Variablendeklaration zu verwenden:
 var first-name = 'Robin'; 
 // Uncaught SyntaxError: Unexpected token '-' 
Deshalb ist es besser, sie zu vermeiden.
 JavaScript-Namenskonventionen: Dateien
Es gibt zwei Strategien, Dateien in JavaScript zu benennen: PascalCase und Kebab-Case. In JavaScript-Frontend-Anwendungen werden Sie oft PascalCase für die Benennung von Komponenten (z. B. React-Komponenten) sehen.
 - components/ 
 --- user/ 
 ----- UserProfile.js 
 ----- UserList.js 
 ----- UserItem.js 
 --- ui/ 
 ----- Dialog.js 
 ----- Dropdown.js 
 ----- Table.js 
Im Gegensatz dazu ist in JavaScript-Backend-Anwendungen kebab-case der common sense:
 - routing/ 
 --- user-route.js 
 --- messages-route.js 
Sie werden auch camelCase-Namen sehen, aber ähnlich wie bei PascalCase (sorry Frontend-Anwendungen) besteht die Gefahr, dass Betriebssysteme sie unterschiedlich behandeln, was zu Bugs führen kann. Deshalb sollte das Festhalten an Kebab-Case die Norm für Dateinamen in JavaScript sein.
Wenn Sie mehr über JavaScript-Code-Stil und -Formatierung erfahren wollen, was hier nicht zugunsten von Namenskonventionen besprochen wird, sollten Sie sich unbedingt ESLint und Prettier for JavaScript ansehen.