Web-Dev-For-Beginners/translations/nl/2-js-basics/3-making-decisions

JavaScript Basis: Beslissingen Nemen

Sketchnote door Tomomi Imura

Pre-Lecture Quiz

Pre-lecture quiz

Beslissingen nemen en de volgorde waarin je code wordt uitgevoerd beheersen, maakt je code herbruikbaar en robuust. Dit gedeelte behandelt de syntaxis voor het beheersen van de gegevensstroom in JavaScript en het belang ervan bij gebruik met Booleaanse datatypes.

🎥 Klik op de afbeelding hierboven voor een video over beslissingen nemen.

Je kunt deze les volgen op Microsoft Learn!

Een Korte Herhaling over Booleans

Booleans kunnen slechts twee waarden hebben: true of false. Booleans helpen bij het nemen van beslissingen over welke regels code moeten worden uitgevoerd wanneer aan bepaalde voorwaarden wordt voldaan.

Stel je boolean in op true of false zoals dit:

let myTrueBool = true
let myFalseBool = false

✅ Booleans zijn vernoemd naar de Engelse wiskundige, filosoof en logicus George Boole (1815–1864).

Vergelijkingsoperatoren en Booleans

Operatoren worden gebruikt om voorwaarden te evalueren door vergelijkingen te maken die een Booleaanse waarde opleveren. Hieronder staat een lijst van veelgebruikte operatoren.

Symbool	Beschrijving	Voorbeeld
<	Kleiner dan: Vergelijkt twee waarden en retourneert het Booleaanse datatype true als de waarde aan de linkerkant kleiner is dan die aan de rechterkant	5 < 6 // true
<=	Kleiner dan of gelijk aan: Vergelijkt twee waarden en retourneert het Booleaanse datatype true als de waarde aan de linkerkant kleiner dan of gelijk is	5 <= 6 // true
>	Groter dan: Vergelijkt twee waarden en retourneert het Booleaanse datatype true als de waarde aan de linkerkant groter is dan die aan de rechterkant	5 > 6 // false
>=	Groter dan of gelijk aan: Vergelijkt twee waarden en retourneert het Booleaanse datatype true als de waarde aan de linkerkant groter dan of gelijk is	5 >= 6 // false
===	Strikte gelijkheid: Vergelijkt twee waarden en retourneert het Booleaanse datatype true als de waarden aan beide kanten gelijk zijn EN hetzelfde datatype	5 === 6 // false
!==	Ongelijkheid: Vergelijkt twee waarden en retourneert de tegenovergestelde Booleaanse waarde van wat een strikte gelijkheidsoperator zou retourneren	5 !== 6 // true

✅ Test je kennis door enkele vergelijkingen te schrijven in de console van je browser. Verrast een van de geretourneerde gegevens je?

If Statement

De if-statement voert de code tussen zijn blokken uit als de voorwaarde waar is.

if (condition) {
  //Condition is true. Code in this block will run.
}

Logische operatoren worden vaak gebruikt om de voorwaarde te vormen.

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

If..Else Statement

De else-statement voert de code tussen zijn blokken uit wanneer de voorwaarde onwaar is. Het is optioneel bij een if-statement.

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

✅ Test je begrip van deze code en de volgende code door deze uit te voeren in een browserconsole. Verander de waarden van de variabelen currentMoney en laptopPrice om de geretourneerde console.log() te wijzigen.

Switch Statement

De switch-statement wordt gebruikt om verschillende acties uit te voeren op basis van verschillende voorwaarden. Gebruik de switch-statement om een van de vele codeblokken te selecteren die moeten worden uitgevoerd.

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
  // code block
}

// program using switch statement
let a = 2;

switch (a) {
  case 1:
    a = "one";
    break;
  case 2:
    a = "two";
    break;
  default:
    a = "not found";
    break;
}
console.log(`The value is ${a}`);

✅ Test je begrip van deze code en de volgende code door deze uit te voeren in een browserconsole. Verander de waarde van de variabele a om de geretourneerde console.log() te wijzigen.

Logische Operatoren en Booleans

Beslissingen kunnen meer dan één vergelijking vereisen en kunnen worden gecombineerd met logische operatoren om een Booleaanse waarde te produceren.

Symbool	Beschrijving	Voorbeeld
&&	Logische EN: Vergelijkt twee Booleaanse expressies. Retourneert true alleen als beide waar zijn	(5 > 6) && (5 < 6 ) //Eén kant is onwaar, de andere is waar. Retourneert false
||	Logische OF: Vergelijkt twee Booleaanse expressies. Retourneert true als minstens één kant waar is	(5 > 6) || (5 < 6) //Eén kant is onwaar, de andere is waar. Retourneert true
!	Logische NIET: Retourneert de tegenovergestelde waarde van een Booleaanse expressie	!(5 > 6) // 5 is niet groter dan 6, maar "!" retourneert true

Voorwaarden en Beslissingen met Logische Operatoren

Logische operatoren kunnen worden gebruikt om voorwaarden te vormen in if..else-statements.

let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is true. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

Negatie-operator

Je hebt tot nu toe gezien hoe je een if...else-statement kunt gebruiken om conditionele logica te creëren. Alles wat in een if gaat, moet evalueren naar true/false. Door de !-operator te gebruiken kun je de expressie negeren. Het zou er zo uitzien:

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

Ternaire expressies

if...else is niet de enige manier om beslissingslogica uit te drukken. Je kunt ook iets gebruiken dat een ternaire operator wordt genoemd. De syntaxis ziet er als volgt uit:

let variable = condition ? <return this if true> : <return this if false>

Hieronder staat een concreter voorbeeld:

let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;

✅ Neem een minuut om deze code een paar keer te lezen. Begrijp je hoe deze operatoren werken?

Het bovenstaande stelt dat:

• als firstNumber groter is dan secondNumber
• wijs dan firstNumber toe aan biggestNumber
• anders wijs secondNumber toe.

De ternaire expressie is gewoon een compacte manier om de onderstaande code te schrijven:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

---

🚀 Uitdaging

Maak een programma dat eerst wordt geschreven met logische operatoren en herschrijf het vervolgens met een ternaire expressie. Wat is jouw favoriete syntaxis?

---

Post-Lecture Quiz

Post-lecture quiz

Herhaling & Zelfstudie

Lees meer over de vele operatoren die beschikbaar zijn voor de gebruiker op MDN.

Bekijk Josh Comeau's geweldige operator lookup!

Opdracht

Operatoren

---

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, willen we u erop wijzen dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.