Articles

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.