JavaScript if ... else-instructie (met voorbeelden)

In deze tutorial leer je over de if… else-verklaring om besluitvormingsprogramma's te maken met behulp van voorbeelden.

Bij computerprogrammering kunnen er situaties ontstaan ​​waarin u een codeblok tussen meer dan één alternatief moet uitvoeren. Bijvoorbeeld het toekennen van cijfers A , B of C op basis van cijfers behaald door een student.

In dergelijke situaties kunt u de JavaScript- if… elseinstructie gebruiken om een ​​programma te maken dat beslissingen kan nemen.

In JavaScript zijn er drie vormen van de if… elseverklaring.

  1. als verklaring
  2. if… else- verklaring
  3. if … else if … else- verklaring

JavaScript als Statement

De syntaxis van de ifinstructie is:

 if (condition) ( // the body of if )

De ifinstructie evalueert de conditie tussen haakjes ().

  1. Als de voorwaarde wordt geëvalueerd naar true, wordt de code in de body van ifuitgevoerd.
  2. Als de voorwaarde wordt geëvalueerd naar false, wordt de code in de hoofdtekst van ifovergeslagen.

Opmerking: de code erin ( )is de hoofdtekst van de ifinstructie.

Werking van de if-verklaring

Voorbeeld 1: if-instructie

 // check if the number is positive const number = prompt("Enter a number: "); // check if number is greater than 0 if (number> 0) ( // the body of the if statement console.log("The number is positive"); ) console.log("The if statement is easy");

Uitgang 1

 Voer een getal in: 2 Het getal is positief De if-verklaring is eenvoudig

Stel dat de gebruiker 2 heeft ingevoerd . In dit geval number> 0evalueert de conditie naar true. En de body van de ifinstructie wordt uitgevoerd.

Uitgang 2

 Voer een getal in: -1 De if-instructie is eenvoudig

Stel dat de gebruiker -1 heeft ingevoerd . In dit geval number> 0evalueert de conditie naar false. Daarom wordt de hoofdtekst van de ifverklaring overgeslagen.

Omdat het console.log("The if statement is easy");buiten de body van de ifinstructie valt, wordt deze altijd uitgevoerd.

Vergelijkings- en logische operatoren worden gebruikt in voorwaarden. Dus voor meer informatie over vergelijkings- en logische operatoren kunt u JavaScript-vergelijkings- en logische operatoren bezoeken.

JavaScript if… else-instructie

Een ifinstructie kan een optionele elseclausule hebben. De syntaxis van de if… elseinstructie is:

 if (condition) ( // block of code if condition is true ) else ( // block of code if condition is false )

De if… elseinstructie evalueert de conditie tussen haakjes.

Als de aandoening wordt beoordeeld op true,

  1. de code in de body van ifwordt uitgevoerd
  2. de code in de body van elsewordt niet uitgevoerd

Als de aandoening wordt beoordeeld op false,

  1. de code in de body van elsewordt uitgevoerd
  2. de code in de body van ifwordt niet uitgevoerd
Werking van de if… else-verklaring

Voorbeeld 2: if… else-instructie

 // check is the number is positive or negative/zero const number = prompt("Enter a number: "); // check if number is greater than 0 if (number> 0) ( console.log("The number is positive"); ) // if number is not greater than 0 else ( console.log("The number is either a negative number or 0"); ) console.log("The if… else statement is easy");

Uitgang 1

 Voer een getal in: 2 Het getal is positief. De if… else-instructie is eenvoudig

Stel dat de gebruiker 2 heeft ingevoerd . In dit geval number> 0evalueert de conditie naar true. Daarom wordt de body van de ifinstructie uitgevoerd en wordt de body van de elseinstructie overgeslagen.

Uitgang 2

 Voer een getal in: -1 Het getal is een negatief getal of 0. De if… else-instructie is eenvoudig

Stel dat de gebruiker -1 heeft ingevoerd . In dit geval number> 0evalueert de conditie naar false. Daarom wordt de body van de elseinstructie uitgevoerd en wordt de body van de ifinstructie overgeslagen.

JavaScript if… else if-instructie

De if… elseinstructie wordt gebruikt om een ​​codeblok tussen twee alternatieven uit te voeren. Als u echter een keuze moet maken tussen meer dan twee alternatieven, if… else if… elsekan dit worden gebruikt.

De syntaxis van de if… else if… elseinstructie is:

 if (condition1) ( // code block 1 ) else if (condition2)( // code block 2 ) else ( // code block 3 )
  • Als voorwaarde1 resulteert in true, wordt het codeblok 1 uitgevoerd.
  • Als voorwaarde1 resulteert in false, wordt voorwaarde2 geëvalueerd.
    • Als voorwaarde2 is true, wordt het codeblok 2 uitgevoerd.
    • Als voorwaarde2 is false, wordt het codeblok 3 uitgevoerd.
Werking van de if… else if… else-verklaring

Voorbeeld 3: if… else if Statement

 // check if the number if positive, negative or zero const number = prompt("Enter a number: "); // check if number is greater than 0 if (number> 0) ( console.log("The number is positive"); ) // check if number is 0 else if (number == 0) ( console.log("The number is 0"); ) // if number is neither greater than 0, nor zero else ( console.log("The number is negative"); ) console.log("The if… else if… else statement is easy");

Uitvoer

 Voer een getal in: 0 Het getal is 0. De if… else if… else-instructie is eenvoudig

Stel dat de gebruiker 0 heeft ingevoerd , dan number> 0evalueert de eerste testvoorwaarde naar false. Vervolgens number == 0evalueert de tweede testconditie naar trueen wordt het bijbehorende blok uitgevoerd.

Geneste if… else-instructie

U kunt ook een if… elseverklaring in een if… elseverklaring gebruiken. Dit staat bekend als geneste if… else- instructie.

Voorbeeld 4: Geneste if… else-instructie

 // check if the number is positive, negative or zero const number = prompt("Enter a number: "); if (number>= 0) ( if (number == 0) ( console.log("You entered number 0"); ) else ( console.log("You entered a positive number"); ) ) else ( console.log("You entered a negative number"); )

Uitvoer

 Enter a number: 5 You entered a positive number

Suppose the user entered 5. In this case, the condition number>= 0 evaluates to true, and the control of the program goes inside the outer if statement.

Then, the test condition, number == 0, of the inner if statement is evaluated. Since it's false, the else clause of the inner if statement is executed.

Note: As you can see, nested if… else makes our logic complicated and we should try to avoid using nested if… else whenever possible.

Body of if… else With Only One Statement

If the body of if… else has only one statement, we can omit ( ) in our programs. For example, you can replace

 const number = 2; if (number> 0) ( console.log("The number is positive."); ) else ( console.log("The number is negative or zero."); )

with

 const number = 2; if (number> 0) console.log("The number is positive."); else console.log("The number is negative or zero.");

Output

 The number is positive.

More on Decision Making

In bepaalde situaties kan een ternaire operator een if… elseinstructie vervangen . Ga voor meer informatie naar JavaScript Ternary Operator.

Als u op basis van een bepaalde testconditie een keuze moet maken tussen meer dan één alternatief, kan de switchverklaring worden gebruikt. Ga voor meer informatie naar JavaScript-schakelaar.

Interessante artikelen...