Conditional statements (Decision Making)

Java Script conditional statements are used to write code that perform different actions based on the results of a logical or comparative test conditions at run time. Based on the test conditions result you can perform certain actions. The following conditional statements are available in JavaScript make decisions:

The if statement
• The if...else statement
• The if...else if....else statement
• The switch...case statement
• The Ternary Operator operator

The if Statement

The if statement is used to execute a block of code based upon a logical condition. The block following the condition is executed only when the condition specified resolves to true. If the condition evaluates to false, the statements following the if block are not executed. The syntax for if statement is as follows:

if(condition) {
    // Code to be executed, if condition is true.
}

Example:

    let interestRate = 12;
    if (member == true) {
         interestRate = 10;
       }

class="notesh">The if...else Statement

The if...else statement allows you to execute one block of code if the specified condition is results to true and another block of code if it is results to false. The if...else statement enhances the decision making capabilities of JavaScript program by providing an alternative choice. The syntax for if –else statement is as follows:

if(condition) {
    // Code to be executed if condition is true
} else {
    // Code to be executed if condition is false
}

Example:

let age = 15;
if( age > 18 ){
document.write("Qualifies for driving");
}else{
document.write("Does not qualify for driving");
}

The if...else if...else Statement

The 'if...else if...' statement is an advanced form of if…else that allows JavaScript to make a correct decision out of several conditions.

The syntax for if..else if…else statement is as follows:

if(condition1) {
    // Code to be executed if condition1 is true
} else if(condition2) {
    // Code to be executed if the condition1 is false and condition2 is true
} else {
    // Code to be executed if both condition1 and condition2 are false
}

Example:

if (score >= 90)
alert ("A");
else
if (score >= 80)
alert ("B");
else
if (score >= 70)
alert ("C");
else
if (score >= 60)
alert ("D");
else
alert("F");

Switch...Case Statement

The switch statements provide a more readable way of writing elseif statements. The switch..case statement is an alternative to the if...else if...else statement. The switch...case statement tests a variable or expression against a series of values until it finds a match, and then executes the block of code corresponding to that match.

Switch...Case Statement syntax:

switch(x){
    case value1:
        // Code to be executed if x === value1
        break;
    case value2:
        // Code to be executed if x === value2
        break;
    ...
    default:
        // Code to be executed if x is different from all values
}

Example:

switch (day) {
case 0: alert ("Sunday"); break;
case 1: alert ("Monday"); break;
case 2: alert ("Tuesday"); break;
case 3: alert ("Wednesday"); break;
case 4: alert ("Thursday"); break;
case 5: alert ("Friday"); break;
case 6: alert ("Saturday"); break;
default: alert ("Invalid Input"); break;
}

The Ternary Operator

The ternary operator is a special operator that operates on three operands and hence ternary in nature. The logical expression and two values (or expression) from which one will be used as a result based upon the logical expression or condition being passed. It is useful in writing single line conditional statements, which can replace the if else code.

Ternary Operator syntax:

var result = (condition) ? value1 : value2;

Example:

let age = 15;
let eligibleToVote = (age> = 18)? "Yes": "No";

If the condition is evaluated to true the "Yes" will be returned, otherwise "No" will be returned.

Try Yourself:

1. Write a program to move a red circle from left to right side of the canvas and change the color of the circle if x co-ordinate of the circle is > 200 pixels. Try It

2. Write a program to move a circle opposite direction of mouseX. Try It

3. Write a program using if..else if .. if to fill the canvas different color cirlces according to mouseX position. Try It