Der ultimative Leitfaden für JavaScript-Namenskonventionen

Wenn viele Mitglieder an einem Projekt arbeiten, ist es ein Muss, einen bestimmten Standard zu haben, dem man folgen kann, um die Skalierbarkeit zu gewährleisten.

Heute sprechen wir über den grundlegendsten Standard, die Namenskonventionen: was wir tun sollten und was nicht.

Lassen Sie uns einsteigen.

// Don’t
function fetchData() {}// Do
function fetchUsers() {}

Wir wissen, dass fetchData() eine API aufrufen und die Daten vom Server abrufen würde, aber welche Daten? Es ist besser, sie spezifischer zu benennen, richtig? Je spezifischer, desto weniger Zeit werden Sie damit verbringen, zu überlegen, worum es sich bei den Namen ohne Kommentare handelt.

Vermeiden Sie Ein-Buchstaben-Namen

Abgesehen von den gebräuchlichen Namen wie i für index in Schleifenanweisungen, sollten Sie Ein-Buchstaben-Namen vermeiden, weil es Sie später verwirren wird.

// Don’t
let n = 0;// Do
let number = 0;

Benutzen Sie lange Namen, wenn es nötig ist

Ganz oft streben wir kurze Namen an. In einigen Fällen, um klarer und anschaulicher zu sein, sollte ein längerer Name jedoch kein Problem sein.

// Don’t
function findBooks() {}// Do
function findBooksByAuthor() {}

Variablen

Einen Kommentar nur für eine Variablendefinition zu schreiben, ist eher überflüssig. Ein Variablenname sollte beschreibend sein, so dass Sie beim Betrachten genau wissen, wofür er verwendet wird.

// Don’t
let d = ‘01/01/2021’;
let number = 28;// Do
let date = ‘01/01/2021’;
let age = 28;

Es gibt viele Namensstile, jedoch sollten Sie aus Konsistenzgründen camelCase verwenden.

// Don’t
let book_title = ‘JavaScript’;
let BOOKTITLE = ‘JavaScript’;
let booktitle = ‘JavaScript’;// Do
let bookTitle = ‘JavaScript’;

Konstanten

Konstanten in JavaScript können nicht verändert werden. Um sie von anderen Variablen zu unterscheiden, sollten alle Buchstaben in einer Konstanten in GROSSBUCHSTABEN geschrieben werden.

// Don’t
const pi = 3.14;// Do
const PI = 3.14;

Booleans

Ein Boolean ist wie eine Ja/Nein-Frage:

• Ist es gelesen?
• Haben Sie es getan?
• Sind die gleich?

Daher sollte die Art und Weise, wie Sie eine boolesche Variable benennen, diesen Fragen ähneln.

// Don’t
let decoration = true;
let red = true;
let visible = false;// Do
let hasDecoration = true;
let isRed = true;
let isVisible = false;

Funktionen

Sie rufen eine Funktion auf, wenn Sie eine Aktion ausführen wollen. Ein Funktionsname sollte also mit einem Verb eingeleitet werden.

// Don’t
function data() {}// Do
function fetchData() {}

Sie sollten konsistente Verben dem kreativen Umgang mit dem gleichen Konzept vorziehen.

// Don’t
function getUsers() {}
function fetchBooks() {}
function retriveAuthors() {}// Do
function fetchUsers() {}
function fetchBooks() {}
function fetchAuthors() {}

Klassen

Wie in anderen Programmiersprachen sollte die Benennung eines Klassennamens der PascalCase folgen und ein Klassenname sollte ein Substantiv sein.

// Don’t
class mobileDevice {}// Do
class MobileDevice {}

Dateien

Für JavaScript-Dateien gibt es zwei gängige Arten der Namensgebung: Kebab-Case und PascalCase.

Kebab-Case:

-components/
--product/
---product-details.js
---product-list.js

PascalCase:

-components/
--product/
---ProductDetails.js
---ProductList.js

Sie können beide verwenden. Ich entscheide mich für KebabCase.

Komponenten (React)

Dies ist spezifisch für React. Wir sollten PascalCase für Komponentennamen verwenden.

// Don’t
class profilePicture extends React.Component {
render() {
return <h1>Profile Picture</h1>;
}
}// Do
class ProfilePicture extends React.Component {
render() {
return <h1>Profile Picture</h1>;
}
}

Fazit

Das ist alles, was Sie über Namenskonventionen in JavaScript wissen müssen. Sie können diese nützliche Liste als Lesezeichen speichern und später bei Bedarf darauf zurückgreifen.

Hoffentlich hat Ihnen dieser Artikel gefallen.