by In this tutorial, we will be showing you how to write the if, else, and else if conditional statements in JavaScript.
In JavaScript, a conditional statement allows you to perform an action when a particular condition is considered truthy.
These are a crucial part of JavaScript as it allows you to perform different actions when a condition has been met. For example, it allows you to write dynamic code that reacts to elements on a page or user input.
The specified condition needs to be truthy for a statement to be run. For example, “1 === 1” is a statement that is “truthy“, whereas “1 === 2” is a statement that is “falsy“.
Don’t get confused between a Boolean “true” and false” and “truthy” and “falsy“. A value is considered “truthy” whenever its value is not false, undefined, null, 0, -0, NAN, or an empty string ("").
Over the next few sections, we will touch on the the following conditional statements in JavaScript: “if“, “if...else“, “if...else if“, “if...else if...else“.
Table of Contents
- if Statement in JavaScript
- JavaScript if…else Conditional Statement
- Using the if…else if Conditional Statement in JavaScript
- The JavaScript if…else if…else Conditional Statement
- Using Nested If Statements in JavaScript
- Conclusion
The if Statement in JavaScript
Let us start this guide off with the most basic conditional statement that you should learn, the if statement.
The JavaScript if statement allows you to run a code block when the condition you specify is true.
Below you can see the general syntax for using the if statement within JavaScript.
if (condition) {
//Code be run when the condition is truthy
}Example of Writing an if Statement in JavaScript
Let us write a short script to show you how the if statement works within JavaScript. In this script, we will get the current day of the week and use a conditional statement to see if it is Wednesday.
Start the script by instantiating the Date() object and assigning it to a constant named “date“.
We then access the date objects “getDay()” function to get the day of the week and store it in a variable called “day“.
Finally, we use our JavasScript’s if statement to check whether the day variable is identical (===) to 3 (Wednesday).
If the day is identical to 3, then the text “The Day is Wednesday” will be printed to the console.
const date = new Date();
const day = date.getDay();
if (day === 3) {
console.log("The Day is Wednesday");
}JavaScript if…else Conditional Statement
The next conditional statement we will explore is the JavaScript “if...else” statement.
Using the “else” statement you can run a code block only if the previous conditional statements were false.
You will find this statement useful when you only want code to be run when a condition isn’t met. The else statement must always be used at the end of an “if else if” statement chain.
Below you can see the syntax for using the “if else” statement within JavaScript.
if (condition) {
//Code block is executed if above condition is True
} else {
//Code is run when all previous conditions are False
}Example of Using The if else Conditional Statement
Let us build upon the example we used in the “if statement” section.
By adding an else statement to the end of an if statement we can print a message stating that it is not Wednesday.
With the example below, we first use an if statement to check if the day of the week is identical to “3“. If it isn’t identical, the code will fall through to our else statement and print the text “The Day is not Wednesday“.
const date = new Date();
const day = date.getDay();
if (day === 3) {
console.log("The Day is Wednesday");
} else {
console.log("The Day is not Wednesday");
}Using the if…else if Conditional Statement in JavaScript
In some cases, you may want to check if another condition is met when your first condition proves to be false.
You can achieve this by using the “else if” conditional statement in JavaScript This statement allows you to check if a condition is true if the first is false.
The syntax below shows you how you can write an “if ... else if” conditional statement within JavaScript.
if (condition) {
//Code is ran when above condition is true
} else if (condition) {
//If the first condition is false and
//the above condition is true, then this block will be ran
}Example of using the if else if Statement
For this example, we will be retrieving the current day by using the Date() object. B
With the if conditional statement, we check that the current day is identical to 3. If the statement is true, we log the text “The Day is Wednesday“.
If the day isn’t set to 3, we utilize JavaScript’s else if statement to check if a different condition is met. In this condition, we check if the day is identical to 5.
If the day is identical to 5 we will print text “The Day is Friday” to the console.
const date = new Date();
const day = date.getDay();
if (day === 3) {
console.log("The Day is Wednesday");
} else if (day === 5) {
console.log("The Day is Friday");
}The JavaScript if…else if…else Conditional Statement
The final JavaScript conditional statement that we will be looking into is the “if else if else” statement.
What this shows us is a combination of all the if statements that are supported within JavaScript.
- You start by checking if a particular condition is met.
- If that condition hasn’t been met, you can check if another condition is met.
- Finally, if none of the previous conditions are met, you can use the else statement to run additional code.
Below is an example of how you would write an if, else if, else conditional statement within JavaScript.
if (condition) {
//Code block is ran when the condition above is True
} else if (condition) {
//Code block is run when the first condition is False
//and this condition is True
} else {
//Code is ran when all over conditions are false
}Example of Writing the if, else if, else Conditional Statement
For this example, we will retrieve the date using the Date object and print text based on what day it is.
The first if statement we use in our JavaScript example will check whether the day is identical to the number 3 (Wednesday). If the day variables value is identical to 3, the message “The Day is Wednesday” will be logged.
When the first condition is false, we then utilize the JavaScript else if statement to test whether the day is identical to 5 (Friday). If the day variable is identical to 5, we print the message “The Day is Friday“.
Finally, if our first two conditions are proved false, we utilize the JavaScript else conditional statement to print out the message “The Day isn't Wednesday or Friday“.
const date = new Date();
const day = date.getDay();
if (day === 3) {
console.log("The Day is Wednesday");
} else if (day === 5) {
console.log("The Day is Friday");
} else {
console.log("The Day isn't Wednesday or Friday");
}Using Nested If Statements in JavaScript
Sometimes you will want to run an if statement in JavaScript only if the first one was true. This behavior is achieved by using what is called “nested if statements”.
You nest an if statement by using one within another if statement.
This is useful when you want to run some code, then perform some additional actions if another condition is true.
Below is an example of what nested conditional statements look like when written in JavaScript.
if (condition) {
//Code is fired if the first condition is true
if (condition) {
//Code is run if both this and the first condition is true
}
}Example of Using Nested If Statements
We start our example script by instantiating the date object and storing it in the “date” variable.
Immediately afterward, we get the current day of the week using the “.getDay()” function and store its value in the “day” variable.
We then have our first if statement, which we used to check if the day is identical (===) to number 3 (Wednesday).
If the above condition is met, we print the text “The Day is Wednesday” to the console. We then use the date object again to get the current hour of the day using the “.getHours()” function and store it in the “hour” variable.
Finally, we have our JavaScript’s nested if statement. With this condition, we check if the hour variable is greater than 12. If this condition is met, we print the text “It is after midday“.
const date = new Date();
const day = date.getDay();
if (day === 3) {
console.log("The Day is Wednesday");
const hour = date.getHours();
if (hour > 12) {
console.log("It is after midday");
}
}Conclusion
Throughout this guide, we have shown you how to use if, else, and else if conditional statements in JavaScript.
Using these conditional statements, you can write code that performs an action when the specified condition is met.
We have covered how JavaScript handles whether a condition is considered “truthy” or “falsy“.
If you have any questions about using the if statement in JavaScript, please comment below.
Be sure to check our other JavaScript tutorials and many other coding guides.
