Like many other programming languages, JavaScript also allows you to write code that performs different actions based on the results of a logical or comparative test conditions at run time. This means you can create test conditions in the form of expressions that evaluates to either true or false and based on these results you can perform certain actions.
There are several conditional statements in JavaScript that you
can use to make decisions:
- The if statement
- The if...else statement
- The if...else if....else statement
- The switch...case statement
We will discuss each of these statements in detail in the coming
sections.
The if Statement
The if statement is used to execute a block of
code only if the specified condition evaluates to true. This is the simplest
JavaScript's conditional statements and can be written like:
if(condition) {
// Code to be executed
}
The following example will output
"Have a nice weekend!" if the current day is Friday:
Example
var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6
if(dayOfWeek == 5) {
alert("Have a nice
weekend!");
}
The if...else Statement
You can enhance the decision making
capabilities of your JavaScript program by providing an alternative choice
through adding an else statement to the if statement.
The if...else statement allows you to execute one block of code if
the specified condition is evaluates to true and another block of code if it is
evaluates to false. It can be written, like this:
if(condition) {
// Code to be executed if
condition is true
} else {
// Code to be executed if
condition is false
}
The JavaScript code in the following
example will output "Have a nice weekend!" if the current day is
Friday, otherwise it will output the text "Have a nice day!".
Example
var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6
if(dayOfWeek == 5) {
alert("Have a nice
weekend!");
} else {
alert("Have a nice
day!");
}
The if...else if...else Statement
The if...else if...else a
special statement that is used to combine multiple if...else statements.
if(condition1) {
// Code to be executed if
condition1 is true
} else if(condition2) {
// Code to be executed if the
condition1 is false and condition2 is true
} else {
// Code to be executed if both
condition1 and condition2 are false
}
The following example will output
"Have a nice weekend!" if the current day is Friday, and "Have a
nice Sunday!" if the current day is Sunday, otherwise it will output
"Have a nice day!"
Example
var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6
alert("Have a nice
weekend!");
} else if(dayOfWeek == 0) {
alert("Have a nice
Sunday!");
} else {
alert("Have a nice
day!");
}
You will learn about the JavaScript
switch-case statement in the next chapter.
The Ternary Operator
The ternary operator provides a
shorthand way of writing the if...else statements. The ternary
operator is represented by the question mark ( ? ) symbol and it takes three
operands: a condition to check, a result for true , and a result for false .
Its basic syntax is:
var result = (condition) ? value1 : value2
If the condition is evaluated to true
the value1 will be returned, otherwise value2 will be returned. To understand
how this operator works, consider the following examples:
Example
var userType;
var age = 21;
if(age < 18) {
userType = 'Child';
} else {
userType = 'Adult';
}
alert(userType); // Displays Adult
Using the ternary operator the same
code could be written in a more compact way:
Example
var age = 21;
var userType = age < 18 ? 'Child' : 'Adult';
alert(userType); // Displays Adult
As you can see in the above example,
since the specified condition evaluated to false the value on the right side of
the colon ( : ) is returned, which is the string 'Adult'.
Tip: Code written
using the ternary operator can be difficult to read sometimes. However, it
provides a great way to write compact if-else statements.