Elk nuttig programma bereikt uiteindelijk een beslispunt. Moet deze knop het formulier verzenden of een foutmelding tonen? Ziet deze gebruiker het admin-dashboard of de gastweergave? JavaScript beantwoordt deze vragen met conditionele statements. Ze zijn de regelkleppen van je code: ze openen het ene pad en sluiten het andere, alles op basis van de vraag of een expressie true of false is. Zonder deze statements zou je script van boven naar beneden lopen zonder ooit te reageren op de persoon die het gebruikt.

De eenvoudigste vertakking: if

Het if-statement is de poort waar je als eerste doorheen gaat. Je plaatst een voorwaarde tussen haakjes. Als die voorwaarde true is, wordt het codeblok eronder uitgevoerd. Als het false is, slaat JavaScript het blok volledig over en gaat verder in het bestand.

Dit is precies wat je nodig hebt voor eenvoudige, eenmalige controles. Stel je voor dat je een formulierveld valideert voordat je iets naar een server stuurt:

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

Geen email, geen verzending. De logica is simpel en duidelijk. Gebruik if wanneer er slechts één uitzondering is om rekening mee te houden en er geen alternatieve actie vereist is.

Keuzes maken: if...else

De meeste echte beslissingen hebben twee kanten. Het if...else-paar dekt precies dat. Het ene blok wordt uitgevoerd als de voorwaarde waar is, het andere als deze onwaar is. De twee paden sluiten elkaar uit.

Stel je een controle op dark-mode voor bij het laden van een pagina:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

De browser zal nooit beide classes toevoegen. Hij kiest één pad, voert het uit en gaat verder. Telkens wanneer je logica zich duidelijk splitst in twee mogelijke uitkomsten, is dit de structuur die je moet gebruiken.

Meerdere paden: if...else if...else

Niet elk probleem is binair. Soms heb je een ladder van mogelijkheden nodig. De if...else if...else-keten laat je verschillende voorwaarden na elkaar testen. JavaScript evalueert deze van boven naar beneden en voert het eerste blok uit waarvan de voorwaarde true is. Na die match wordt de rest van de ladder genegeerd.

Een klassiek voorbeeld is het koppelen van een numerieke score aan een cijfer:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

De volgorde is hier van cruciaal belang. Als je score >= 70 zou controleren vóór score >= 90, dan zou bijna elk voldoende cijfer in de C-categorie terechtkomen, omdat de eerste match die true is wint. Rangschik je voorwaarden van meest specifiek naar minst specifiek, en sluit de keten altijd af met een laatste else om alles op te vangen wat er tussendoor glipt.

Het matchen van vaste waarden: switch

Wanneer je één variabele vergelijkt met een lijst van bekende constanten, wordt een lange if...else-keten onoverzichtelijk. Het switch-statement maakt dit overzichtelijker. Het evalueert één keer een expressie en vergelijkt deze vervolgens met case-labels met behulp van strikte gelijkheid (===). Dit maakt de code makkelijker leesbaar wanneer de opties duidelijk gedefinieerd en benoemd zijn.

Denk bijvoorbeeld aan het instellen van openingstijden op basis van de huidige dag:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

Wees voorzichtig met break. Als je het weglaat, gaat de uitvoering door naar de volgende case en blijft deze doorlopen. Dat gedrag is af en toe nuttig, maar vaker nog veroorzaakt het stille bugs. Wanneer je het correct gebruikt, maakt switch je bedoeling in één oogopslag duidelijk en houdt het gerelateerde vertakkingen netjes onder elkaar in één kolom.

Compacte beslissingen: de ternaire operator

De ternaire operator — geschreven als ? : — is een expressie, geen statement. Dat onderscheid is belangrijk