In this section, we will learn what the if else statement is and how to use it in JavaScript.
What is Condition Statement?
A condition statement in JavaScript is a statement that its execution depends on a condition!
For example, if the value of the variable `x` was greater than 100, then the target statement should be executed! As you can see, the execution of a specific statement depends on the value of a variable!
These types of statements are called conditional statements.
What is JavaScript if else?
The `if-else` statements are used when we have a set of instructions to run, but the execution is dependent on a condition to be true.
Basically, we want those instructions to run only if the result of an expression is true. Otherwise, those instructions should be skipped.
The use of `if-else` keywords in the JavaScript pretty much follows the same purpose that these two statements have in the real world. For example, we use the word `if` to say a condition statement and if the condition was false, then we use the word `else` to run another statement, which is basically our plan B if you will.
For Example: If the weather was nice today I’ll go for a walk, else I’ll stay home and work on my application!
The first statement in this example depends on the condition of the weather. Now if the weather was good (true) the statement (`walking`) will be executed. Otherwise, the statement that is defined for the `else` part (which is `working on the application`) will be executed.
JavaScript if Statement (AKA if-then statement)
At its core, an if statement represents a block! Basically, using the `if` statement, we can create a block and put a set of instructions there that their execution will depend on a condition that we define for the if statement.
If the condition that we define for the `if` statement resulted `true`, then the instructions in this block will be executed, otherwise the body will be skipped altogether.
JavaScript if Statement Syntax:
Here’s the structure of the `if else` statements:
if (condition){
//body of the if-statement where code is and will be run if the result of the condition is true
}else{
//the code here will only run if the result of the condition is not true.
}
- `if`: To create an `if` statement, we start with the keyword `if`.
- `()`: after the `if` keyword comes the parentheses. This is where we set the condition or conditions to be checked.
Note: The comparison operators are very handy here.
Here, we can run a condition on the value of a variable and if the result of that condition was true then the body of the `if` statement will be executed.
For example, the condition might be `age == 21` which means check and see if the value of the `age` variable is equal to 21. If the result was true, then instructions within the body of `if-statement` will run. Otherwise, the body of the `else` statement is the one to run.
Notes:
== The value `true` and `false` can also be directly used in the parentheses as well.
== If we used values of type primitives or object directly in the parentheses without any operator; the execution engine will run the `ToBoolean` operation on that value to see whether it should coerce the value into `true` or `false`.
For example, if in the parentheses we used:
if (100){…}
The end result will be true because running the `ToBoolean` operation on the value 100 will return `true`.
- `{}`: The open and close braces that come after the parentheses declare the starting and closing point of the body of the `if` statement. Any code here in this block will be run if the result of the condition set in the parentheses is true.
- `else`: the else keyword comes after the closing brace `}` of the `if-statement` and is used to set the instructions that should run if only the condition result of the `if-statement` is false.
Notes:
- The body of `else-statement` is within the braces that comes after the `else` keyword. Also, this `else-statement` does not have parentheses to put new condition.
- The use of `else` is optional and we can simply skip it. In this case, if the condition of the `if-statement` was false, then the instructions that come after the block of the `if-statement` will run (if any).
Also remember that either the body of `if` OR `else` statement will run (depending on the result of the condition in the if-statement) but not both.
Example: using if statement in JavaScript
var age = 20;
if (age >21){
console.log("Yes the age is greater than 21");
}else{
console.log("The age is less than 21");
}
Output:
The age is less than 21
How Does if Statement Work?
In the last example, we have an if statement with the condition of `age>21`. If the result of this expression becomes true, then the body of the if statement will execute. Otherwise, it’s the body of the else statement that will run instead.
So here we know that the value of the `age` variable is not greater than the value 21! So the result of the condition we’ve set for the `if` statement becomes false and hence its block will be skipped and the body of the `else` statement will run instead.
JavaScript else Statement
As mentioned before, the `else` statement is a statement that comes after defining an `if` statement and runs in case of the condition of the `if` statement resulted false!
Notes:
- We can’t use the `else` statement on its own and it only can be used after an `if` statement (or an else-if statement which you’ll learn what they are in just a moment).
- This statement doesn’t have any condition and will run if the result of an `if` statement (its condition) was false. Think about the `else` statement as the last plan!
- Also, the use of this statement is optional!
Example: using else statement in JavaScript
const name = "John";
if (name == "Omid"){
console.log("The name is Omid");
}else{
console.log("The name is not Omid");
}
Output:
The name is not Omid
JavaScript if statement with string values
In the ToBoolean operation section, we mentioned that an empty string value is equal to the value false and a non-empty string will be coerced to the value true.
So here if we put an empty string value as the condition of an if statement, the condition becomes false and the body of that statement will be skipped. And of course if we put a non-empty string value as the condition, then the final result of the if statement becomes true and its body will run.
Example: if statement and string values
if (""){
console.log("This body will never run!");
}else{
console.log("An empty string is equal to false");
}
if ("Hello"){
console.log("A non-empty string is equal to true");
}else{
console.log("This message will never gets printed");
}
Output:
An empty string is equal to false A non-empty string is equal to true
JavaScript else-if Statement: (JavaScript Ladder Statement)
There are times that we have multiple conditions and want to run a different set of instructions depending on which of these conditions result true.
This is where the `else if` statement comes in.
The statement is an addition to the `if-else` statement and, as a matter of fact, it will sit between `if` and `else` statements.
JavaScript else-if Syntax:
if (condition_1){
//body of the if-statement where code is and will be run if the condition is true
}else if (condition_2){
//body of the else-if-statement where the code is and will be run if the condition_2 is true
}else if (condition_N){
//body of the else-if-statement where the code is and will be run if the condition_N is true
}else{
//the code here will only run if none of the conditions in `if` and `else if` result true.
}
`else-if`: if the condition of the `if` statement was not true, then the condition of the first `else-if` statement will be checked. If the first `else-if` condition’s result was false as well, the second one will be checked and this process will go on until one of the `else if` statements result true and in that case the instructions within its body will run. Otherwise, it’s the instructions of the `else` statement to run if none of the conditions result true.
Notes:
- The use of this `else-if` statement is optional and, depending on the need of the program, we can add as many as we want between the `if else` statements.
- If the condition of the `if` statement was true, the rest of `else if` statements and the `else` statement will be skipped.
Also, the same is true for any `else if` statement (any `else-if` statement results true, the rest of `else-if` statements will be skipped and only the body of that `else-if` statement will run)
Example: using else-if in JavaScript
const value = 200;
if (value == 100){
console.log("The value is: 100");
}else if(value == 200){
console.log("The value is: 200");
}else if(value == 150){
console.log("The value is: 150");
}else{
console.log("None of the conditions matched the value\n");
}
Output:
The value is: 200
Note: the `else` statement always comes as the last statement and will run only if none of the conditions before the else statement result true. In another word if all the conditions were false, in that case only the body of `else` statement will run.
Also, we can only use one `else` statement.
Example: else statement in JavaScript
const money = 1000;
const age = 21;
if (age >= 21 && money >5000){
console.log("The person can enter to the bar\n");
}else if(age >= 21 && money <5000){
console.log("The person can legally enter to a bar but she can't come to this bar because she doesn't have enough money");
}else if(age <21 && money >5000){
console.log("The person has the money but she is under legal age.");
}
Output:
The person can legally enter to a bar but she can't come to this bar because she doesn't have enough money
JavaScript Nested if Statement
In JavaScript and pretty much any programming languages that support the `if` statement, we’re allowed to use one or more if statements within the body of another if statement.
Using an if statement within the body of another if statement is called nesting if statements.
This is a useful method! Because sometimes even though the condition of an if statement is true, inside the body of that statement we might have a set of instructions that needs more conditional decisions and hence the need for `if` statement.
Example: creating nested if Statement in JavaScript
const name = "John";
const age = 17;
if (name == "John"){
if (age >18){
console.log("The name is John and his age is higher than 18");
}else{
console.log("The name is John but his age is under 18");
}
}else{
console.log("The name is not Omid");
}
Output:
The name is John but the age is under 18
Note: the example above is simple enough so that hopefully you get the point of nesting if statements.
