If you’re just starting to learn JavaScript, one of the first things you’ll end up learning about are conditionals, else, you are missing essential knowledge on how to control behavior in your tool-belt.
Conditional statements help determine what blocks of code are executed based on conditions you set.
The different types of conditionals I’ll be covering here are: “if”, “else”, and “else if”
I’ll also include some comparison and logical operators that can be used in your conditionals.
The “if” statement
Syntax:
What an “if” statement does is, it checks a condition, if that condition is true, it runs the code block in the curly brackets.
Example:
In this example, using the let variable declaration, we assign the variable “happy” to a value of “true”.
In the “if” statement, we have the argument equal to the variable “happy” and we check the value of “happy” to see if it is “true”. Because the value is true, we execute the code block, which will give us the output of “Yay for serotonin!”
In this example, we are reassigning the value of “happy” and changing it to “false”. When we run the code again, the output returns nothing. This is because the condition we have no longer evaluates as “true” and no code block is executed.
If we wanted something to return as a result of the condition evaluating as false, we can use the “if…else” statement.
The “if…else” statement
Syntax:
if/else statements execute code blocks based on whether a conditional statement evaluates as true or false.
Example:
In this example, we are adding the “else” part to our original “if” statement. For this if/else statement, because the condition does not evaluate as “true”, the code block in the “else” statement is executed.
One thing to note is that the “else” statement can only be used when paired with an “if” statement. What if we wanted to check a condition that can evaluate to more than two outcomes?
The “else if” statement
Syntax:
The “else if” statement allows us to add more conditions if there could be more than two outcomes. These are read from top to bottom. If a condition evaluates as true, then its code block is executed and the rest of the code below it is not read. If you have an “else” statement and none of the “else if” statements evaluate as true, the code block in the “else” statement will be executed. Think of the “else” statement as “if none of these statements are true, then this is the code block to execute.
Example:
In this example, we use the let variable declaration and declare the variable timeOfDay equal to the value of “morning”. In this “if/else” statement, the first condition evaluates as true because timeOfDay equals the value “morning” and the code block is executed, giving us the output of “Good morning!” then the other code below it is not read. If timeOfDay did not equal ‘morning’, ‘afternoon’, or ‘evening’, then we would get a return value of “Salutations!”.
Comparison Operators
Comparison operators are tools that we can use to evaluate the conditionals.
Comparison operators include:
Less than: <
Less than or equal to: <=
Greater than: >
Greater than or equal to: >=
Is equal to: ===
Is not equal to: !==
All comparison statements evaluate to either true or false and are made up of two values to be compared and an operator that separates and compares the two values.
Example:
In this example, the condition is if the variable ‘cost’ is less than or equal to 14, console.log(‘I will buy this item’), else, console.log(‘This item is to expensive”). In the first line, we declare a variable ‘cost’ and set it equal to the value of 15. Because this value is greater than 14, the condition is ‘false’ and the code block in the ‘else’ statement will execute, returning to us the output of “This item is too expensive”.
Logical Operator &&
The logical operator &&, or the ‘and’ operator, checks if both provided expressions are truthy. When using the && operator, both conditions must evaluate as “true” for the statement to evaluate as “true” and execute. If either condition is
“false”, the && condition will evaluate as “false” and the “else” code block will be executed.
Example:
In this example, the if statement checks the two conditions. Because “tired” equals “true” and “tiredLevel” is greater than 5, both conditions evaluate as “true”, making the condition as a whole equal to “true”. Because the condition is “true”, the first code block is executed and we receive a return of “Time for a nap”.
Logical Operator ||
The logical operator ||, or the “or” operator, checks if either expressions are truthy. When using the logical operator ||, or “or”, only one condition must evaluate as “true”.
Example:
In this “if” statement, “hungerLevel” is greater than 5, however “boredLevel” is less than 5. Because “hungerLevel” evaluates as “true”, even though “boredLevel” returns as “false”, the first code block is executed and we get an output of “Time to eat”.
The ! Operator
The ! operator, or “Bang” operator, switches the truthiness and falsiness of a value. In other words, the ! / not operator reverses/negates the value of a boolean.
Example:
Ternary Operator
The ternary operator is shorthand syntax to simplify if/else statements that return either a falsey or truthy value.
Syntax:
Example:
Because there are only two possible return values and they are either truthy or falsey, we can use shorthand syntax and convert it like:
Switch Statement
A switch statement can be used to simplify the process of writing multiple else if statements.
The “switch” keyword initiates the statement and is followed by a condition that will contain a value that each case will compare. The “case” keyword checks if the expression matches the specified value that comes after it. If the value of “videoGame” equalled ‘star ocean’, that case’s code block would execute. The “break” keyword tells the program to exit the block and not execute any more code or check any other cases inside the code block. Without the “break” keyword, all cases will run regardless if there is a match or not.
At the end of each “switch” statement, there is a default statement that will run if none of the “case”’s are true. Think of it like the “else” in the if/else statements.
In the example I have listed above, the output will be “best RPG” because the case ‘final fantasy’ equals the value of “videoGame”.
