JavaScript Naamgevingsconventies

Een JavaScript naamgevingsconventies introductie met een voorbeeld — die je het gezond verstand geeft als het gaat om het benoemen van variabelen, functies, klassen of componenten in JavaScript. Niemand ziet toe op de naleving van deze regels, maar ze worden algemeen aanvaard als een standaard in de JS-gemeenschap.

JavaScript naamgevingsconventies: Variabelen

JavaScript-variabelen zijn hoofdlettergevoelig. Daarom zijn JavaScript-variabelen met kleine letters en hoofdletters verschillend:

 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" 
Een JavaScript-variabele moet zelfbeschrijvend zijn. Het zou niet nodig moeten zijn om een opmerking toe te voegen voor aanvullende documentatie bij de variabele:
 // bad 
 var value = 'Robin'; 
 
 // bad 
 var val = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Het vaakst zul je JavaScript-variabelen aantreffen die worden gedeclareerd met een camelCase-variabelenaam met een voorloop-teken in kleine letters:
 // bad 
 var firstname = 'Robin'; 
 
 // bad 
 var first_name = 'Robin'; 
 
 // bad 
 var FIRSTNAME = 'Robin'; 
 
 // bad 
 var FIRST_NAME = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Er zijn uitzonderingen voor JavaScript-constanten, privates en klassen/componenten — die we later zullen bespreken. Maar in het algemeen wordt een JavaScript-variabele — een string, booleaans of getal, maar ook een object, array of functie — gedeclareerd met een camelCase-variabelenaam.
Een kort overzicht van de verschillende case stijlen:

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

 JavaScript Naamgeving Conventies: Boolean
Een voorvoegsel zoals is, are, of has helpt elke JavaScript-ontwikkelaar om een boolean van een andere variabele te onderscheiden door er alleen maar naar te kijken:
 // bad 
 var visible = true; 
 
 // good 
 var isVisible = true; 
 
 // bad 
 var equal = false; 
 
 // good 
 var areEqual = false; 
 
 // bad 
 var encryption = true; 
 
 // good 
 var hasEncryption = true; 
In tegenstelling tot strings en integers kun je het zien als een andere zachte regel voor een JavaScript boolean naamgevingsconventie naast het feit dat het in camel case wordt geschreven.
 JavaScript naamgevingsconventies: Functie
JavaScript functies worden ook in camel case geschreven. Daarnaast is het een best practice om aan te geven wat de functie doet door de functienaam een werkwoord als voorvoegsel te geven.

 // bad 
 function name(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
 
 // good 
 function getName(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
Dit werkwoord als voorvoegsel kan van alles zijn (bijv. get, fetch, push, apply, calculate, compute, post). Het is nog een zachte regel om te overwegen om meer zelf-beschrijvende JavaScript-variabelen te hebben.
 JavaScript-naamgevingsconventies: Class
Een JavaScript-klasse wordt gedeclareerd met een PascalCase, in tegenstelling tot andere JavaScript-datastructuren:
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
elke keer dat een JavaScript-constructor wordt aangeroepen om een nieuwe instantie van een klasse te instantiëren, moet de naam van de klasse in Pascal Case verschijnen, omdat de klasse in de eerste plaats met Pascal Case is gedeclareerd.
 JavaScript Naming Conventions: Component
Componenten zijn niet overal in JavaScript te vinden, maar wel vaak in frontend frameworks zoals React. Omdat een component een soort instantiated is — maar in plaats daarvan aan het DOM wordt toegevoegd — zoals een JavaScript class, worden ze ook veel gedeclareerd met Pascal Case.
 // 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> 
 ); 
 } 
Wanneer een component wordt gebruikt, onderscheidt deze zich van native HTML- en webcomponenten, omdat de eerste letter altijd in hoofdletters wordt geschreven.
 <div> 
 <UserProfile 
 user={{ firstName: 'Robin', lastName: 'Wieruch' }} 
 /> 
 </div> 
 JavaScript-naamgevingsconventies: Methoden
Gelijk aan JavaScript-functies wordt een methode in een JavaScript-klasse gedeclareerd met camelCase:
 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 gelden dezelfde regels als voor JavaScript-functies — bijv. het toevoegen van een werkwoord als voorvoegsel –, om de naam van de methode zelfbeschrijvender te maken.
 JavaScript-naamgevingsconventies: Private

Zelden zul je in JavaScript een underscore (_) voor een variabele/functie/methode aantreffen. Als je er een ziet, is het bedoeld om privé te zijn. Hoewel JavaScript dit niet echt kan afdwingen, zegt het ons hoe iets als privé moet worden gebruikt of hoe het niet mag worden gebruikt.
Een privé-methode in een klasse mag bijvoorbeeld alleen intern door de klasse worden gebruikt, maar mag niet worden gebruikt door een instantie van de klasse:
 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" 
Een privé-variabele/functie kan ook in een JavaScript-bestand voorkomen. Dit kan betekenen dat de variabele/functie niet buiten dit bestand mag worden gebruikt, maar alleen intern om verdere bedrijfslogica te berekenen voor andere functies binnen hetzelfde bestand.
 JavaScript-naamgevingsconventies: Constanten
Ten slotte zijn er constanten — bedoeld als niet-veranderende variabelen — in JavaScript die in hoofdletters (UPPERCASE) worden geschreven:
 var SECONDS = 60; 
 var MINUTES = 60; 
 var HOURS = 24; 
 
 var DAY = SECONDS * MINUTES * HOURS; 
Als een variabele meer dan één woord in de declaratienaam heeft, wordt gebruikgemaakt van een underscore (_):
 var DAYS_UNTIL_TOMORROW = 1; 
Over het algemeen worden JavaScript-constanten bovenaan in een JavaScript-bestand gedefinieerd. Zoals al eerder is aangegeven, dwingt niemand je om de variabele hier niet te veranderen, behalve een const-declaratie van de variabele voor primitieve datastructuren, maar de naamgeving met hoofdletters suggereert om dit te vermijden.
 JavaScript-naamgevingsconventies: Global Variable
Een JavaScript-variabele is globaal gedefinieerd, als de hele context er toegang toe heeft. Vaak wordt de context gedefinieerd door het JavaScript bestand waarin de variabele wordt gedeclareerd/definieerd, maar in kleinere JavaScript projecten kan dat het hele project zijn. Er zijn geen speciale naamgevingsconventies voor globale JavaScript-variabelen.

Een globale JavaScript-variabele wordt bovenaan in een project/bestand gedeclareerd.
Een globale JavaScript-variabele wordt in camelCase geschreven als hij muteerbaar is.
Een globale JavaScript-variabele wordt in UPPERCASE geschreven als hij onveranderbaar is.

 JavaScript-naamgevingsconventies: Underscore
Hoe zit het dan met de underscore en het streepje in de naamgeving van JavaScript-variabelen? Aangezien camelCase en PascalCase voornamelijk in JS worden gebruikt, heb je gezien dat de underscore slechts zelden wordt gebruikt voor private variabelen of constanten. Af en toe zul je underscores tegenkomen bij het verkrijgen van informatie van derden zoals databases of API’s. Een ander scenario waarin je een underscore kunt zien, zijn ongebruikte functieparameters, maar maak je daar nog geen zorgen over als je ze nog niet hebt gezien 😉
 JavaScript-naamgevingsconventies: Streepje
Een streepje in een JavaScript-variabele is ook geen gezond verstand. Het maakt dingen alleen maar moeilijker; zoals het gebruik ervan in een object:
 // bad 
 var person = { 
 'first-name': 'Robin', 
 'last-name': 'Wieruch', 
 }; 
 
 var firstName = person; 
 
 // good 
 var person = { 
 firstName: 'Robin', 
 lastName: 'Wieruch', 
 }; 
 
 var firstName = person.firstName; 
Het is zelfs niet mogelijk om een streepje direct te gebruiken voor een variabele-declaratie:
 var first-name = 'Robin'; 
 // Uncaught SyntaxError: Unexpected token '-' 
Daarom is het beter om ze te vermijden.
 JavaScript-naamgevingsconventies: Bestanden
Er zijn twee naamgevingsstrategieën voor bestanden in JavaScript: PascalCase en kebab-case. In JavaScript frontend applicaties zie je vaak PascalCase voor het benoemen van componenten (bijv. React componenten).
 - components/ 
 --- user/ 
 ----- UserProfile.js 
 ----- UserList.js 
 ----- UserItem.js 
 --- ui/ 
 ----- Dialog.js 
 ----- Dropdown.js 
 ----- Table.js 
In backend-applicaties van JavaScript is kebab-case daarentegen de gangbare betekenis:
 - routing/ 
 --- user-route.js 
 --- messages-route.js 
Je zult ook camelCase-benamingen zien, maar net als bij PascalCase (sorry frontend-toepassingen) bestaat het risico dat besturingssystemen deze anders behandelen, wat tot bugs kan leiden. Daarom zou het aanhouden van kebab-case de norm moeten zijn voor bestandsnamen in JavaScript.
Als je meer wilt leren over de stijl en opmaak van JavaScript-code, die hier niet wordt besproken omwille van naamgevingsconventies, moet je zeker eens kijken naar ESLint en Prettier for JavaScript.