Hoe betere namen te schrijven voor je variabelen, functies en klassen – Met voorbeelden

Het benoemen is een van de belangrijkste en uitdagende onderdelen bij het schrijven van schone, onderhoudbare en schaalbare code. Een goed doordachte variabelenaam kan bijvoorbeeld fungeren als zelfdocumenterende code, wat tijd en moeite bespaart bij het begrijpen van de logica. Maar slecht gekozen namen kunnen daarentegen leiden tot verwarring en bugs.

Dit artikel zal dienen als een uitgebreide handleiding over hoe betekenisvolle namen te bedenken voor klassen, variabelen en functies, met voorbeelden en beste praktijken.

Waarom is benoeming belangrijk?

• Leesbaarheid: Goede namen maken uw code intuïtief en verminderen de leercurve voor anderen.

• Onderhoudbaarheid: Het is eenvoudiger om goed benoemde code te herstructureren of te debuggen.

• Samenwerking: Duidelijke namen verbeteren de teamcommunicatie en productiviteit.

• Schaalbaarheid: Betekenisvolle namen helpen om grote projecten beheersbaar te houden.

Verschillende Stijlen van Benaming Conventies

Verschillende stijlen van benaming conventies zijn cruciaal voor het verbeteren van de leesbaarheid en onderhoudbaarheid van code in verschillende programmeertalen.

Stijlen zoals camelCase, PascalCase, snake_case en kebab-case zijn afgestemd op specifieke contexten en praktijken.

camelCase wordt veel gebruikt voor variabelen en functies, terwijl PascalCase de voorkeur heeft voor klassen. snake_case is favoriet in Python vanwege de duidelijkheid, en kebab-case domineert CSS voor HTML-elementstijlen.

Elke stijl zorgt voor consistentie, waardoor de code intuïtief is voor teams en toekomstige ontwikkelaars. Hier is een beknopte samenvattingstabel van enkele populaire naamgevingsconventies samen met hun gebruik en voorbeelden:

Hoe de juiste stijl te kiezen

1. Taal-Specifiek: Volg de conventies van uw programmeertaal of framework. Bijvoorbeeld:

   • JavaScript: camelCase voor variabelen en functies, PascalCase voor componenten.

   • Python: snake_case voor variabelen en functies.

   • CSS/HTML: kebab-case voor klassen en ID’s.

2. Team of Project Standaarden: Consistentie is belangrijk. Gebruik de overeengekomen stijl voor uw team/project.

3. Doel-specifiek: Gebruik benamingstijlen die het beste de benoemde entiteit vertegenwoordigen (bijvoorbeeld constanten in SCREAMING_SNAKE_CASE).

Algemene benamingrichtlijnen

Voordat we ingaan op specifieke benamingsconventies voor klassen, variabelen en functies, laten we enkele universele principes verkennen:

1. Wees beschrijvend en beknopt: Namen moeten het doel of de rol van de variabele/functie/etc overbrengen:

    // Slecht
    let x = 10;
   
    // Goed
    let maxGebruikersToegestaan = 10;
   

2. Vermijd cryptische afkortingen die moeilijk te begrijpen kunnen zijn voor andere ontwikkelaars (of zelfs voor je toekomstige zelf):

    // Slecht
    let usrNm = "John";
   
    // Goed
    let userName = "John";
   

3. Gebruik consistente naamgevingsconventies: Kies een naamgevingsstijl (camelCase, PascalCase, kebab-case, snake_case) en houd je daar gedurende je project aan.

4. Vermijd gereserveerde trefwoorden of verwarrende namen:

    // Slecht
    let let = 5;
   
    // Goed
    let variableName = 5;
   

Oké, nu we de basis hebben behandeld, laten we dieper ingaan op enkele nuttige naamgevingsconventies.

Hoe goede klassenamen te maken

Klassennamen definiëren het visuele of structurele gedrag van elementen in uw toepassing. Het schrijven van duidelijke klassenamen zorgt ervoor dat uw HTML en CSS gemakkelijk te begrijpen en te onderhouden zijn.

1. Gebruik beschrijvende namen

Klassennamen moeten het doel van het element beschrijven, niet de verschijning ervan.

<!-- Slecht -->
<div class="red-button"></div>

<!-- Goed -->
<div class="primary-button"></div>

2. Volg de BEM (Block-Element-Modifier) methodologie

BEM is een populaire conventie voor het schrijven van schaalbare en onderhoudbare CSS. Het scheidt componenten in:

• Blok: Vertegenwoordigt het component (bijvoorbeeld kaart).

• Element: Vertegenwoordigt subelementen van het blok (bijvoorbeeld kaart__titel).

• Modifier: Vertegenwoordigt variaties van het blok of element (bijvoorbeeld kaart__titel--gemarkeerd).

Voorbeeld:

<div class="card">
  <h1 class="card__title card__title--highlighted">Welcome</h1>
  <p class="card__description">This is a card component.</p>
</div>

3. Gebruik kebab-case

CSS klassenamen worden traditioneel geschreven in kebab-case voor een betere leesbaarheid.

<!-- Slecht -->
<div class="primaryButton"></div>

<!-- Goed -->
<div class="primary-button"></div>

Hoe goede variabelenamen te maken

Variabelen bevatten gegevens en moeten betekenisvolle namen hebben die beschrijven wat ze vertegenwoordigen.

1. Gebruik Zelfstandige Naamwoorden voor Variabelen

Variabelen zijn typisch zelfstandige naamwoorden omdat ze entiteiten of gegevens vertegenwoordigen.

// Slecht
let a = "John";

// Goed
let userName = "John";

2. Gebruik Voorvoegsels om Context Toe te Voegen

Het toevoegen van voorvoegsels helpt bij het verduidelijken van het type of doel van een variabele:

• Booleaans: is, has, kan

• Getallen: max, min, totaal

• Arrays: Gebruik meervoudsvormen (bijvoorbeeld, gebruikers, items).

Voorbeeld:

let isUserLoggedIn = true;
const maxUploadLimit = 5; // MB
const usersList = ["John", "Jane"];

3. Vermijd Generieke Namen

Vermijd namen zoals data, waarde, of item tenzij ze noodzakelijk zijn.

// Slecht
let data = 42;

// Goed
let userAge = 42;

Hoe Goede Functienamen te Creëren

Functies voeren handelingen uit, dus hun namen moeten de bewerking of het proces weerspiegelen dat ze uitvoeren.

1. Gebruik Werkwoorden voor Functies

Functies zijn actiegericht, dus hun namen moeten beginnen met een werkwoord:

// Slecht
function userData() {
  // ...
}

// Goed
function fetchUserData() {
  // ...
}

2. Wees Specifiek Over Functionaliteit

Functienamen moeten aangeven wat ze doen.

// Slecht
function handle() {
  // ...
}

// Goed
function handleFormSubmit() {
  // ...
}

3. Gebruik Voorvoegsels voor Intentie

• Voor event handlers: handle, on

• Voor hulpprogramma’s: calculate, convert, format

• Voor fetch-operaties: fetch, get, load

• Voor setters en getters: set, get

Voorbeeld:

function handleButtonClick() {
  console.log("Button clicked!");
}

function calculateDiscount(price, discountPercentage) {
  return price * (discountPercentage / 100);
}

Hoe te weten of een naam goed is voor een variabele, functie of klasse

Om te begrijpen of een naam goed is voor een variabele, functie of klasse, is het belangrijk om deze te evalueren aan de hand van verschillende belangrijke principes. Hier is een gids om je te helpen beslissen of een naam passend en betekenisvol is in jouw programmeercontext:

1. Vertegenwoordigt het het doel?

zijn het belangrijkste kenmerk van goede benamingen. Een naam zou meteen moeten vertellen wat de variabele, functie of klasse vertegenwoordigt of doet, zonder dat er extra opmerkingen of documentatie moeten worden gelezen.

Hoe te beoordelen:

Vraag jezelf af: “Wanneer ik deze naam lees, kan ik meteen begrijpen wat het doel ervan is?”

Voorbeeld:

• userAge is beter dan a omdat userAge je vertelt wat de variabele vertegenwoordigt, terwijl a te vaag is.

2. Is het Specifiek Genoeg?

De naam zou voldoende specifiek moeten zijn om de exacte rol van het element in je code weer te geven. Te generieke namen zoals data of temp kunnen verwarrend zijn omdat ze niet genoeg context bieden.

Hoe te beoordelen:

Vraag: “Is deze naam specifiek voor wat deze variabele, functie of klasse vertegenwoordigt in mijn applicatie?”

Voorbeeld:

• calculateTaxAmount() is beter dan calculate() omdat duidelijk is waar de functie berekeningen voor uitvoert.

3. Volgt het een Consistente Naamgevingsconventie?

Consistentie in naamgevingsconventies is essentieel. Wanneer alle teamleden dezelfde conventies volgen, is de code gemakkelijker te begrijpen en te navigeren.

Hoe te beoordelen:

Vraag: “Is deze naam consistent met de naamgevingsconventies die in de rest van het project worden gebruikt?” Volg de projectrichtlijnen zoals:

• camelCase voor variabelen en functies (bijv., userLeeftijd)

• PascalCase voor klassen (bijv., GebruikersProfiel)

• UPPERCASE_SNAKE_CASE voor constanten (bijv., MAX_GEBRUIKERS)

Voorbeeld:

• Als je team camelCase volgt, is gebruikersData beter dan GebruikersData.

4. Vermijdt het ambiguïteit?

Een goede naam elimineert ambiguïteit. Het mag niet voor meerdere interpretaties vatbaar zijn. Als het verschillende dingen kan betekenen in verschillende contexten, zal dit leiden tot verwarring.

Hoe te beoordelen:

Vraag: “Zou iemand die niet bekend is met de codebase verkeerd kunnen begrijpen waarnaar deze naam verwijst?”

Voorbeeld:

• Gebruik in plaats van het benoemen van een boolean isValid, isGebruikerIngelogd of isEmailGeverifieerd om duidelijker te maken wat er wordt gecontroleerd.

5. Is het gemakkelijk te lezen en uit te spreken?

Hoewel niet strikt noodzakelijk, kan gemakkelijk leesbaarheid en uitspraak de algehele leesbaarheid en onderhoudbaarheid van uw code verbeteren.

Hoe te beoordelen:

Vraag: “Is deze naam gemakkelijk hardop te lezen en kan ik het in één oogopslag begrijpen?”

Vermijd lange namen en gebruik gangbare afkortingen alleen wanneer ze algemeen geaccepteerd zijn.

Voorbeeld:

• maxRetries is beter dan maximumNumberOfAttemptsToReconnect.

6. Vermijdt het Redundantie?

Vermijd redundantie in namen. Herhaal geen informatie die al geïmpliceerd of beschreven wordt door de context.

Hoe te beoordelen:

Vraag: “Herhaal ik informatie die al duidelijk is uit de omringende context?”

Voorbeeld:

• Als je een klasse hebt met de naam User, is het redundant om een methode userGetData() te noemen. Gebruik in plaats daarvan getData().

7. Is het Zelfdocumenterend?

De beste namen documenteren zichzelf. Goede namen verminderen de noodzaak voor aanvullende opmerkingen of uitleg.

Hoe te beoordelen:

Vraag: “Beschrijft deze naam volledig de variabele, functie of klasse zonder dat er een opmerking nodig is om uit te leggen wat het doet?”

Voorbeeld:

• berekenTotalePrijs spreekt voor zich, dus er is geen noodzaak voor een aanvullende opmerking zoals “Deze functie berekent de totale prijs na korting.”

8. Is Het Contextueel en Relevant voor het Domein?

De naam moet passen binnen de context van je project en het domein. Bijvoorbeeld, benamingen voor een webapplicatie kunnen verschillen van die voor een mobiele app of een machine learning model.

Hoe te Beoordelen:

Vraag: “Is deze naam in lijn met het domein en de context van mijn project?”

Als je werkt in een specifiek domein (bijvoorbeeld financiën, gezondheid, gaming), gebruik dan domeinspecifieke termen die gemakkelijk herkenbaar zijn.

Voorbeeld:

• In een game-applicatie is gezondheidsPunten meer passend dan gp, omdat het de betekenis weerspiegelt.

9. Is Het Toekomstbestendig?

Denk na over hoe je code zal evolueren. Namen moeten flexibel genoeg zijn om toekomstige veranderingen te accommoderen zonder dat er refactoring nodig is.

Hoe te Beoordelen:

Vraag: “Zal deze naam nog steeds zinvol zijn als de functionaliteit verandert of het project groeit?”

Voorbeeld:

• gebruikersInfo zou verouderd kunnen raken als de datastructuur verandert. Het is beter om gebruikersProfiel te gebruiken als je verwacht dat er meer velden worden toegevoegd.

10. Vermijdt Het Magische Getallen en Hard-gecodeerde Waarden?

Magische getallen (getallen met onduidelijke betekenis) moeten vermeden worden ten gunste van genoemde constanten.

Hoe te beoordelen:

Vraag: “Vertegenwoordigt deze naam een betekenisvolle constante, of is het gewoon een rauw getal?”

Voorbeeld:

• In plaats van het gebruiken van 1000, gebruik een constante zoals MAX_BESTANDSGROOTTE om de betekenis achter het getal uit te leggen.

Praktijkvoorbeelden

CSS Voorbeeld

Het volgende CSS voorbeeld toont hoe de BEM (Block-Element-Modifier) naamgevingsconventies toe te passen om een gestructureerde en schaalbare klassenhiërarchie te behouden in uw stylesheet:

<!-- HTML -->
<div class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item navbar__item--active">Home</li>
    <li class="navbar__item">About</li>
    <li class="navbar__item">Contact</li>
  </ul>
</div>

/* CSS */
.navbar {
  background-color: #333;
  padding: 10px;
}

.navbar__list {
  list-style: none;
}

.navbar__item {
  display: inline-block;
  padding: 10px;
}

.navbar__item--active {
  color: orange;
}

Dit is wat er gebeurt in deze code:

• BEM Naamgeving: navbar is het Blok, dat het hoofdnavigatiecomponent voorstelt.

• navbar__lijst is het Element, een kind van het blok, dat de lijst van navigatie-items voorstelt.

• navbar__item is nog een ander Element dat individuele lijstitems voorstelt.

• navbar__item--active is een Modifier, gebruikt om het actieve menu-item te markeren.
  Deze aanpak maakt het gemakkelijk om relaties en rollen binnen de HTML en CSS te begrijpen, en ondersteunt modulaire en herbruikbare stijlen.

JavaScript Voorbeeld

Dit JavaScript-voorbeeld laat zien hoe je betekenisvolle en consistente naamgevingsconventies voor variabelen en functies kunt gebruiken om de code zelfverklarend te maken:

// Variabelen
let isUserLoggedIn = false;
const maxAllowedItems = 10;

// Functies
function fetchUserDetails(userId) {
  // Haal gebruikersgegevens op van de API
}

function calculateTotalPrice(cartItems) {
  return cartItems.reduce((total, item) => total + item.price, 0);
}

Hier is wat er gebeurt in de code:

• Variabelen:

  • isUserLoggedIn: Een boolean-variabele die duidelijk aangeeft wat het doel is. Het voorvoegsel is helpt om het als een boolean te identificeren.

  • maxAllowedItems: Een constante met een hoofdletter max voorvoegsel toont aan dat het een limiet is, waardoor de intentie duidelijk is.

• Functions:

  • fetchUserDetails(userId): De naam weerspiegelt het doel van de functie, namelijk het ophalen van gebruikersgegevens. De parameter userId is beschrijvend en vermijdt ambiguïteit.

  • calculateTotalPrice(cartItems): De functienaam geeft expliciet de uitgevoerde actie weer. De parameter cartItems is contextueel relevant voor de e-commerce sector.

Waarom het goed is: Deze conventies zorgen ervoor dat de code leesbaar en intuïtief is, waardoor de cognitieve belasting voor andere ontwikkelaars die aan hetzelfde project werken, wordt verminderd.

Conclusie

Betekenisvolle benaming is zowel een belangrijke conventie als een kunstvorm die aanzienlijk van invloed is op de leesbaarheid en onderhoudbaarheid van je code.

Probeer deze basisprincipes te volgen:

• Gebruik beschrijvende, beknopte namen.

• Houd je aan consistente conventies zoals BEM voor klassenamen en camelCase voor variabelen en functies.

• Gebruik voorvoegsels om context en duidelijkheid toe te voegen.

Deze en de andere tips die we hier hebben besproken, zullen ervoor zorgen dat je code een genot is om mee te werken, of je deze nu maanden later opnieuw bekijkt of samenwerkt met een team. Begin vandaag met het toepassen van deze tips en zie hoe de kwaliteit van je code stijgt.