De Ultieme Gids voor JavaScript Naamconventies

Wanneer veel leden aan een project werken, is het een must om een bepaalde standaard te volgen met het oog op schaalbaarheid.

Vandaag gaan we het hebben over de meest basale standaard, naamgevingsconventies: wat we wel en niet moeten doen.

Laten we er eens dieper op ingaan.

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

We weten dat fetchData() een API zou aanroepen en de gegevens van de server zou halen, maar welke gegevens? Het is beter om het specifieker te noemen, toch? Hoe specifieker, hoe minder tijd u kwijt bent aan het bedenken waar de namen over gaan zonder commentaar.

Vermijd één-letter-namen

Behoudens de veel voorkomende namen zoals i voor index in loop statements, moet u één-letter-namen vermijden omdat het u later in verwarring zal brengen.

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

Gebruik lange namen als dat nodig is

Vaak streven we naar korte namen. In sommige gevallen, echter, om duidelijker en meer beschrijvend te zijn, zou een lange naam geen probleem moeten zijn.

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

Variabelen

Het schrijven van een commentaar alleen voor een variabele definitie is waarschijnlijk overbodig. Een variabelenaam moet beschrijvend zijn, zodat je bij het bekijken precies weet waar hij voor dient.

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

Er zijn vele naamgevingsstijlen, maar je moet camelCase gebruiken voor consistentie.

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

Constanten

Constanten in JavaScript kunnen niet worden veranderd. Om onderscheid te maken met andere variabelen moeten alle letters in een constante HOOFDLETTERS zijn.

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

Booleans

Een boolean is als een ja/nee vraag:

• Wordt het gelezen?
• Heb je het gedaan?
• Zijn die gelijk?

Daarom moet de manier waarop je een boolean variabele een naam geeft lijken op die vragen.

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

Functies

Je roept een functie aan als je een actie wilt uitvoeren. Een functienaam moet dus beginnen met een werkwoord.

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

Je moet de voorkeur geven aan consistente werkwoorden boven creatief zijn voor hetzelfde concept.

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

Klassen

Net als in andere programmeertalen moet de naamgeving van een klasse PascalCase volgen en moet een klasse-naam een zelfstandig naamwoord zijn.

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

Bestanden

Voor JavaScript-bestanden hebben we twee gebruikelijke stijlen van naamgeving: kebab-case en PascalCase.

kebab-case:

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

PascalCase:

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

Je kunt ze allebei gebruiken. Voor mij kies ik voor kebab-case.

Components (React)

Dit is specifiek voor React. We moeten PascalCase gebruiken voor componentnamen.

// 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>;
}
}

Conclusie

Dat is alles wat je moet weten over naamgevingsconventies in JavaScript. U kunt deze nuttige lijst bookmarken en er later naar verwijzen als dat nodig is.

Hoop dat u plezier beleeft aan dit artikel.