JavaScript 101 /if...else
If...else
If...else statementsStatement: the instruction that tells the computer to perform a specific action (also known as conditional logic) allow you to execute different code based on a condition. Let's have a look:
How it looks like in JS
You start every if-statement with "if", of course. Between the parentheses (), you put the condition you want to check. Then, outside the parentheses you put the statement that will be executed if the condition is true, between curly braces {}.
Feel free to play around with the code below
Comparison operators
In the example above, we used the "==" operator to compare the value of isItFun to false. This is called a comparison operator. There are many different comparison operators in JavaScript, such as:
==(equal to)!=(not equal to)==(equal to and same type)>(greater than)<(less than)>=(greater than or equal to)<=(less than or equal to)
Hint: If you want to check if a value == true or if the value == false you can use this shorter way instead: if(value) or if(!value)
If...else...and more?
As you can see, If...else statements allow you to execute different code based on a condition.
You too do things differently based on certain conditions. You probably wake up earlier on weekdays than on weekends, right?
Let's have a look at how that would work
As you can see you check multiple conditions using else if statements. Once one of the conditions is met, the corresponding block of code is executed, and the rest are ignored.
Make sure you don't write multiple if-statements for what could be handled with else if statements.
And still, that code has a lot of repetition. We can do WAY better!
The order of things (and operators)
We can check multiple conditions in a specific order using if...else...elseif statements. In each statement you can also use logical operators like && (and) and || (or) to combine conditions. Maybe you need multiple conditions to be true at the same time? You could of course nest multiple if...else statements in each other but it can quickly become hard to read and maintain.
Also, do not forgot that everything's being executed in order, from top to bottom. In the following example, the second condition will never be reached because the first condition is already true.
Advanced Topics
Comparing with ===
In JavaScript, there are two ways to check if values are equal: == and ===. The difference is that == checks for equality of value, while === checks for equality of both value and type. It's generally recommended to use === to avoid unexpected type coercion. Additionally, === is case-sensitive and it is faster because it doesn't perform type conversion.
Ternary Operator
The ternary operator is a shorthand way of writing an if...else statement. It takes three operands: a condition, a value if the condition is true, and a value if the condition is false. For example: var result = condition ? valueIfTrue : valueIfFalse;
It's possible to write really compact conditional expressions using the ternary operator. Test it out:
Skipping curly braces
In JavaScript, if a block contains a short (so it stays readable) one-line statement, you can omit the curly braces.
Switch Statements
Some people swear by these but you honestly don't need these. You can do everything and more with if...else statements. There is only one case where a switch statement might be more readable: when you have multiple values to check against the same variable.
There are a lot of more advanced topics related to if...else statements, such as the ternary operator and switch statements. We won't cover those in this course, but feel free to check them out on your own!