Conditional Statements By Chloe

Conditional statements control the flow of your program and determine how your code will look under certain conditions.
Conditional statements execute a specific instruction depending on whether the outcome is true or false.
It is often viewed as a flow chart. Some examples of when you would use a conditional statement in your code would be:
To only submit a form when all fields are filled out.
To open something on a click event.

If statements

If is a reserved keyword in Javascript, meaning it can not be used for anything else other than conditional statements.
An if statement will determine whether the conditional is true or false and only run if it is true. If it is false the block of code will be ignored.
An if statement is written starting with the if keyword, followed by a condition in brackets and then the code to be executed in curly brackets if the condition is true.
i.e.
if (condition) {
// code to be executed
}

An example of this would be:
        var num1 = 10;
        var num2 = 15;
        if (num1 <= num2) {
            console.log(`${num1} is less than $num2`);
        }
        => 10 is less than 15.
        
In this example, the code would execute because 10 is less than 15.
However, if you changed num1 to equal 20, the code would be ignored because num1 is now greater than num2.

Else Statements

Often with code, even if the condition renders as false you want something to be executed.
This is where the else statement comes in.
The else statement is written after the if statement, but has no condition in brackets.
i.e.

if (condition){
code to be executed if true;
} else {
code to be executed if false;
}

This can be useful to show the user warnings if they have not filled something out correctly or do not meet a certain criteria such as age.
An example of an if...else statement would be:

        var temp = 10;
        if (temp >= 15){
        console.log(It's hot outside, be sure to wear suncream!);
        } else {
        console.log(It's chilly out, remember a jacket!);
        }
        => It's chilly out, remember a jacket!
        
This is because the temp variable was less than 15, therefore the condition was false so it moved onto the else statement.

Else...if Statements

Usually in Javascript more than one condition needs to be evaluated, and the user needs more than two different options. This is where an else...if statements is handy.
The else...if can evaluate more than one condition and will run the code that is true.
If none of the code is true it will run the else statement.

if (condition1) {
block of code is executed if condition1 is true};
else if (condition2) {
block of code is executed if condition1 is false, but condition 2 is true};
else {
block of code is executed if condition 1 and condition 2 are both false };

An example of this would be:

        var money = 2.25;

        if (money > 2.50) {
            console.log('You can buy a chocolate bar and a drink');
        } else if (money > 2) {
            console.log('You can buy a chocolate bar');
        } else {
            console.log('You do not have enough money to buy anything');
        }

        => 'You can buy a chocolate bar'
        
It ran the else if block of code because the if statement was false so it moved onto the else if statement which was true, the code stopped there and executed the block of code.

Ternary Operator

The ternary operator is a shorthand syntax for the if else statement, the syntax for this is:

(condition) ? code if TRUE : code if FALSE

An example of this is:

        var sky = blue;

        var niceDay = (sky===blue) ? "what a beautiful day!" : "Not so nice today, is it?";

        console.log(niceDay);
        => what a beautiful day!
        

Switch Statements

The switch statement can be used interchangeably with the else if statement. It will evaluate blocks of code against cases and execute one or more blocks appropriately.
The syntax for switch statements are as follows:

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

Lets break down the above syntax.
1. The expression is evaluated
2. Case x is tested against the expression to see if it is true. If it is the code block will execute and the break keyword will stop the switch statement.
3. If case x is false. Case y is tested against the expression to see if it is true. If it is the code block will execute and the break keyword will stop the switch statement.
4. If bothe case x and case y are false, the default code will be executed.

Below is an example of a switch statement:
        var age = 20;

        switch(true){
        case age>=21:
        'You can drink';
        break;

        case age=20:
        'One more year then you can drink';
        break;

        default:
        'Sorry, no drinking for you'
        }
        
As age =20, the code block would return 'One more year then you can drink'.

Nested Condition Statements

A nested condition is an if statement within an if statement. An example of this would be:

        if (5 > 2) {

  console.log("If statement here!");

  if(1 > 3) {
    console.log("Nested if statement!");
  } else {
    console.log("Nested else statement");
  }
} else {
  console.log("Regular else statement");
}
=>
If statement here
Nested else statement

This is because the if statement is true, so it logs it. It then goes onto the nested conditional which is false so it logs the nested else statement.