JavaScript Conditional Statements

If else and else if

Conditional statements are a set of commands that are executed when the specified condition is true.

In many cases, you may want to run different code blocks based on user input or other factors.

Conditional statements are part of the logic, decision, or flow specification of a computer program.

In JavaScript, we have the following conditional statements:

• If Statement

• If...else Statement

• Else...if Statement

• Switch Statement

We will discuss the switch statement in the next chapter.

JavaScript If Statement

The statement will execute the code only when the specified condition in if is true.

if　(condition)　{
　　//Code block to be executed if the condition is true
}

if　(x　<　0)　{
　　　document.getElementById("result").innerHTML = "NEGATIVE";
}

JavaScript's if ... else statements

The if...else statement allows you to execute a code block when the specified condition is true, and another code block when the condition is false. The syntax is:

if　(condition)　{
　　　//Code block to be executed if the condition is true
} else {
　　　//Code block to be executed if the condition is false
}

var　x =　-4;
if　(x　<　0)　{
　　　msg = "NEGATIVE";
} else {
　　　msg = "POSITIVE";　　　
}

If the user clicks on the image, the following example will change the value of the src attribute of the image:

<img id="demo" onclick="changeImage()" src="avatar-female.jpg">
<script>
function　changeImage()　{
　　　var　image = document.getElementById("demo");
　　　if　(image.src.match("female"))　{
　　　image.src = "avatar-male.jpg";
　　　} else {
　　　image.src = "avatar-female.jpg";
　　　}
}
</script>

JavaScript's else...if statements

Using if...else, we can run code blocks based on whether a condition is true or false. However, sometimes we may have multiple possible conditions and outputs, and we need more than two options. One way to do this is to use else...if statements, which can evaluate two or more possible results. The syntax is:

if　(condition1)　{
　　//If condition1Code block to be executed if true
}　else　if　(condition2)　{
　　//If condition1If false and condition2Code block to be executed if true
} else {
　　//If condition1If false and condition2Code block to be executed if false
}

//　Set the current grade of the student
var　grade　=　88;
//　Check if the grade is A, B, C, D, or F
if　(grade　>=　90)　{
　　　document.write("A");
}　else　if　(grade　>=　80)　{
　　　document.write("B");
}　else　if　(grade　>=　70)　{
　　　document.write("C");
}　else　if　(grade　>=　60)　{
　　　document.write("D");
} else {
　　　document.write("F");
}

Nested if ... else statements

You can use nested if ... else statements to enhance the decision-making ability of JavaScript programs.

var a =　10, b =　20, c =　30;
var answer;
if (a > b) {
　　　if (a > c) {
　　answer = "A is the largest of the three";
　　　} else {
　　answer = "C is the largest of the three";
　　　}
} else if (b > c) {
　　　answer = "B is the largest of the three";
} else {
　　　answer = "C is the largest of the three";　　　
}

Ternary Operator

The ternary operator provides a convenient way to write if ... else statements.

The ternary operator is written using the syntax of the question mark (? ) and colon (:) as shown below:

(condition) ? expression on true : expression on false

In the above syntax,conditionFirst, the first expression is written, followed by?. The first expression will be executed ontrue onExecution, the second expression will be executed onfalse onExecution.

To understand how the ternary operator works, consider the following example:

var status = (age >=　18) ? "adult" : "minor";

If the age is18If the age is 18 or above, the statement assigns the value 'adult' to the variable status. Otherwise, it assigns the value 'minor' to status.