Beslissingen nemen met if en else

Een if-opdracht voert een codeblok alleen uit als de voorwaarde true is. Met else if controleert JavaScript voorwaarden van bovenaf en stopt bij de eerste die true is.

Code alleen soms uitvoeren

Elk programma tot nu toe voerde elke regel elke keer uit. Nuttige programma's gedragen zich anders in verschillende situaties: een spel toont "You win" alleen als de score hoog genoeg is en een winkel voegt alleen bezorgkosten toe als de bestelling klein is. Met de if-opdracht kiest JavaScript.

const temperature = 31;
if (temperature >= 30) {
  console.log("Hot day. Drink water.");
}
console.log("Done");

De voorwaarde staat tussen haakjes na if. Het is een expressie die een boolean oplevert, meestal een vergelijking uit het vorige hoofdstuk. De code die bij true wordt uitgevoerd staat tussen accolades, die een blok vormen. Als de voorwaarde false is, slaat JavaScript het hele blok over en gaat verder na de sluitende accolade. Hierboven worden beide regels afgedrukt. Verander temperature in 20 en alleen "Done" wordt afgedrukt. De regels binnen het blok zijn twee spaties ingesprongen. JavaScript heeft die inspringing niet nodig, maar je ziet meteen welke regels bij de if horen en elke ervaren programmeur verwacht die.

else: de andere weg

Vaak wil je het ene doen als de voorwaarde true is en iets anders als zij false is. Voeg een else-blok toe. Precies één van de twee blokken wordt uitgevoerd, nooit beide en nooit geen van beide.

const n = 7;
if (n % 2 === 0) {
  console.log(n + " is even");
} else {
  console.log(n + " is odd");
}
// prints: 7 is odd

else if: meer dan twee keuzes

Koppel voor meerdere mogelijkheden voorwaarden aan elkaar met else if. JavaScript test ze van bovenaf. Zodra er één true is, voert het dat blok uit en slaat de rest over, ook als latere voorwaarden eveneens true zouden zijn. De laatste else vangt alles op wat hierboven nergens bij paste.

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("F");
}
// prints: C

De volgorde van de voorwaarden doet ertoe. Bij een score van 95 is de eerste test al true en wordt A afgedrukt. Als de tests andersom stonden, beginnend met score >= 70, zou een score van 95 bij de eerste test stoppen en C afdrukken. Zet bij zulke overlappende bereiken de nauwste voorwaarde eerst. Code met de hand doorlopen is een goede gewoonte: kies een waarde, lees van bovenaf en zeg hardop welke tak wordt gevolgd.

Nesten en combineren

Een blok kan nog een if-opdracht bevatten, wat nesten heet. Vaak kun je diepe nesting vermijden door voorwaarden te combineren met && en || uit het vorige hoofdstuk. Deze twee stukken code doen hetzelfde en het tweede is gemakkelijker leesbaar:

if (age >= 8) {
  if (height >= 120) {
    console.log("You can ride");
  }
}

if (age >= 8 && height >= 120) {
  console.log("You can ride");
}

De voorwaardelijke operator

Als je alleen tussen twee waarden hoeft te kiezen, bestaat er een compacte vorm: de voorwaardelijke of ternaire operator, condition ? valueIfTrue : valueIfFalse. Bijvoorbeeld const label = n % 2 === 0 ? "even" : "odd";. Gebruik die voor korte waardekeuzes. Voor alles met meerdere opdrachten is een gewone if en else duidelijker.

Een veelgemaakte fout is één gelijkteken in de voorwaarde schrijven: if (score = 100). Dat slaat 100 op in score in plaats van te vergelijken en het blok wordt elke keer uitgevoerd. Vergelijk altijd met ===.