JavaScript Conditional Statements Explained

New tutorials sent to your inbox 💌
grooving doodle
Prerequisites
This tutorial assumes that you are familiar with declaring variables and working with the data types Number, String and Boolean. Please check out the tutorial on JavaScript variables and data types if you haven't already done so 🙂.
What is a conditional statement?
One of the most powerful things about programming is its ability to conditionally run code. We can write code to handle when a condition is true and write a completely separate piece of code to handle when a condition is false. In this tutorial, we are going to learn how to write conditional statements using different comparison and logical operators.
The if else statement
The if statement is used for evaluating a condition and only runs the code inside the curly braces if the condition is met (true).
if (condition) {
  // condition is true, run this code.
}
An else statement can also be attached to the end of an if statement to run some different code if the condition is not met (false).
if (condition) {
  // condition is true, run this code.
} else {
  // condition is false, run this code.
}
Together, the above syntax creates an if else statement. Let's apply this to our calculator to determine if we are ramen profitable or not.

The calculator has three variables declared:
1. minimumExpenses: to store our minimum expenses.
2. monthlyRevenue: to store our monthly revenue.
3. result: to store the result returned based on our condition.

You may have noticed that we used the keyword let to declare our result variable. The main difference between using a const and a let is that a let allows us to reassign different values to it and a const is read only.
To do: Try updating the variable result to use the keyword const instead. An error should occur :)
Minimum expenses: 450
Monthly revenue: 2000
result: Goal achieved! 🎉
In the code above, we created the variable result as a placeholder since we don't know what the result is at the time of declaring it.

Next, we wrote an if else statement with a condition that checks if our monthly revenue is greater than our minimum expenses. The greater than operator > is called a comparison operator which will return us either a true or a false.

The variable result is set to "Goal achieved! 🎉" if the condition is met, or else it is set to "Goal fell short 🥺".
To do: Try replacing the comparison operator > in the editor with the following: <, >, >=, <=.
Comparing if two values are equal: ===
You may have noticed that I didn't include equals in the to do above. This is because in JavaSript, we don't use the operator = to compare numbers.

To check if two values are equal, we use two equal signs ==. If we want to make sure that both the value and the data type are equal, then we use ===. I recommend using === to not go wrong 😋.
values are the same!
Comparing if two values are not equal: !==
Similarly, we can check if two values do not equal each other by using the "not" operator !. Combining the not operator with the equals operator !== will create "not equals".
values are not the same!
We can also use the not operator together with a boolean to check if something is not true. Nothing is displayed in the console because isRamenProfitable is not "not true".
Comparing two conditions together: &&
The examples above shows how we can compare two variables together, but what happens if we want to compare more than one condition as well? For example, when there are two founders in the startup and we want to make sure both founders did not exceed the budget? This is when we can use the and logical operator &&.
Both succeeded! 🎉
Joining conditions together with the and operator means that all conditions must be met in order for the code to run. Both Sam and Luannie have a spending budget of 800 and as they both have spent less than 800, the code has run.
When only one condition is required to be true: ||
Sometimes we want to compare conditions and run code if any one of the condition is met using an or logical operator ||. Using the same example as above, the code is still run even though Luannie has blew the budget.
Both succeeded! 🎉
In plain english, the condition is true if Sam's expenses is less than the budget or if Luannie's expenses is less than the budget. Even though Luannie's expenses was greater than the budget, the code has ran because Sam's didn't! 🐛

Here are the or combinations and its results to give you a better understanding:

T
T
=
T
T
F
=
T
F
T
=
T
F
F
=
F
Lesson sumamry
Congrats you've made it to the end of the second lesson on JavaScript conditional statements 🎉

Declaring a variable with the keyword let allows us to reassign different values to it.
An if else statement is use to conditionally run code.
The comparison operator === checks if both the type and value is the same.
The comparison operator !== checks if both the type and value is not same.
The logical operator && is used to join conditions together and must all be met.
The logical operator || is used to join conditions together but only one condition needs to be met.
To do: Next lesson on functions
Next tutorial