Conditionele vertakkingen in JavaScript

Dit artikel legt conditionele vertakkingen in JavaScript uit.

YouTube Video

De if-verklaring in JavaScript

Basis Syntax

1if (condition) {
2    // Code that executes if the condition is true
3}

De if-verklaring in JavaScript is een basiscontrole-structuur die wordt gebruikt om de uitvoering van de code te regelen op basis van de vraag of een specifieke voorwaarde waar of onwaar is. Als de voorwaarde waar is, wordt het codeblok uitgevoerd, en als het onwaar is, wordt het overgeslagen.

Voorbeeld

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

In dit voorbeeld, aangezien de waarde van x groter is dan 5, wordt x is groter dan 5 weergegeven in de console.

else-verklaring

Basis Syntax

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

Door een else-verklaring te gebruiken na een if-verklaring, kunt u specificeren welke code moet worden uitgevoerd wanneer de voorwaarde onwaar is.

Voorbeeld

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

In dit geval, aangezien x kleiner is dan 5, wordt "x is 5 of minder" weergegeven.

else if-verklaring

Basis Syntax

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

Als u meerdere voorwaarden wilt controleren, gebruik dan else if. De volgende voorwaarde wordt gecontroleerd als de oorspronkelijke if onwaar is.

Voorbeeld

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

In dit geval wordt, omdat x 5 is, "x is 5" weergegeven.

Ternary-operator (voorwaardelijke operator)

Syntax

1condition ? valueIfTrue : valueIfFalse

Als u een if-verklaring compacter wilt schrijven, kunt u de ternary-operator gebruiken.

Voorbeeld

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

In dit geval, aangezien number 7 is, wordt Oneven weergegeven.

Samenvatting

• if-verklaringen bepalen welke code wordt uitgevoerd, afhankelijk van de vraag of de voorwaarde waar of onwaar is.
• U kunt gedrag specificeren voor wanneer de voorwaarde onwaar is door else te gebruiken.
• U kunt meerdere voorwaarden controleren met else if.
• U kunt ook een ternary-operator gebruiken om voorwaardelijke vertakkingen compact te schrijven.

De switch-verklaring in JavaScript

Basis Syntax

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

De switch-verklaring in JavaScript wordt gebruikt om een expressie (meestal een variabele) te vergelijken met meerdere waarden (cases) en de bijbehorende code uit te voeren. Net als de if-verklaring voert het conditionele vertakkingen uit, maar het is vaak beter leesbaar wanneer er meerdere voorwaarden zijn.

Voorbeeld

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

In dit voorbeeld, aangezien fruit "apple" is, wordt "This is an apple" in de console weergegeven.

break の役割

Door break aan het einde van elke case in te voegen, verlaat je de switch-verklaring nadat die case is uitgevoerd. Als je geen break schrijft, wordt de volgende case ook uitgevoerd (dit wordt fall-through genoemd).

Voorbeeld van Fall-Through

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

In dit geval, aangezien color "red" is en er geen break is na "This is red", worden zowel "This is blue" als "Unknown color" ook weergegeven.

default gebruiken

default is het gedeelte dat wordt uitgevoerd wanneer er geen overeenkomst is met een van de cases. Dit komt overeen met else in een if-verklaring.

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

In dit geval, aangezien animal "dog" is, valt het onder default, en wordt "Unknown animal" weergegeven.

Meerdere waarden met dezelfde case verwerken

Als je dezelfde bewerking wilt uitvoeren voor meerdere cases, kun je deze achter elkaar schrijven.

Voorbeeld

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

In dit voorbeeld, als day 1 is, wordt "Weekday" weergegeven.

switch vs. if

• Een if-verklaring is geschikt voor het controleren van complexe voorwaarden of bereiken. Bijvoorbeeld, complexe voorwaarden zoals een variabele x die groter dan of gelijk aan 10 en kleiner dan of gelijk aan 20 is, kunnen niet in een switch worden geschreven.
• Een switch-verklaring kan de code soms leesbaarder maken bij het controleren of een waarde overeenkomt met een specifieke waarde.

Samenvatting

• De switch-verklaring wordt gebruikt om voorwaardelijke vertakkingen voor meerdere waarden beknopt te schrijven.
• Als je geen break gebruikt aan het einde van elke case, kan de volgende case ook worden uitgevoerd (fall-through).
• De default-sectie wordt uitgevoerd wanneer geen van de cases overeenkomt.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video