JavaScript Conditional Statements

Table of content:

What is a conditional statement

A conditional statement executes a code if a condition is met or something else if that condition is not met.

If you get a 10 at school then I will buy for you a new bike, otherwise I will give you just a cookie!

Cause 1 – get a 10 at school
Effect 1 – get a new bike

Cause 2 – get a score less than 10
Effect 2 – get a cookie

Two types of conditional statements blocks are used in JavaScript:

  1. if/else statement blocks
  2. switch statement blocks

The if/else statement block structure

An if/else statement begins with the JavaScript keyword if followed by a comparison in parentheses.


if (NumberOne>=100)

The comparison between parentheses must return true or false. If it returns true then the browser can go on to the next line. If it returns false then the browser begins looking for the else keyword or the first line of code after the block following the if line is completed.

If the comparison returns true then the block of statements after the if line (which are placed within curly brackets) will be executed.


if (NumberOne>=100) {
window.alert("You have the right number to begin with!");
}

If NumberOne is greater or equal to 100 then the browser will display an alert that says You have the right number to begin with!.

If the comparison returns false then you can use else keyword to tell the browser to execute the code that follows it.


if (NumberOne>=100) {
window.alert("You have the right number to begin with!");
}
else {
window.alert("Wrong number!");
}

In order to know if comparison returns true or false you need to declare the NumberOne variable and assign it a value before the comparison takes place.


var NumberOne=105;
if (NumberOne>=100) {
window.alert("You have the right number to begin with!");
}
else {
window.alert("Wrong number!");
}

The variable NumberOne is assigned a value of 105 which is greater than 100 which means the comparison returns true. Since the comparison returns true the first line of code after the if statement will be executed. The browser will display an alert that says You have the right number to begin with!.

If you assign a value to the variable NumberOne that is less than 100 then the comparison returns false and the code after else keyword will be executed therefor the browser will display an alert that says Wrong number!.


var NumberOne=90;
if (NumberOne>=100) {
window.alert("You have the right number to begin with!");
}
else {
window.alert("Wrong number!");
}

Block nesting

Block nesting means that you put one block structure inside another block structure. It can be an if block inside another if block after the comparison or an else block inside another else block.

Example:


var HondaShop="yes";
var HondaPCX="yes";
if (HondaShop=="yes") {
if (HondaPCX=="yes") {
window.alert ("Motorbike found");
}
else {
window.alert ("Have a shop but no motorbike");
}
}
else {
window.alert ("You need to find a Honda shop");
}

The code starts with two declared variables, both with the value yes. Then we have an if block and an else block. Within the if block (after the comparison) an entire if/else structure is nested.

You can also nest another if/else statement within the else block of your script. Notice a new variable called WebAccess that is used in the nested if/else statement nested within the else block of the script.


var HondaShop="yes";
var HondaPCX="yes";
var WebAccess="yes";
if (HondaShop=="yes") {
if (HondaPCX=="yes") {
window.alert ("Motorbike found");
}
else {
window.alert ("Have a shop but no motorbike");
}
}
else {
if (WebAccess=="yes") {
window.alert ("Find a Honda shop online");
}
else {
window.alert ("You need to find a Honda shop");
}
}

You can nest as many blocks as you want within other blocks. You can have for example an if/else statement nested within an if block which is also nested within another if block.

Complex comparisons

Complex comparisons allows you to create scripts that have more values included or allow a specific range of values to return true.


if ((NumberOne>5)&&(NumberOne<15)) {
document.write("Right number!");
}
else {
document.write("Wrong number!");
}

The comparison is saying that if NumberOne is greater than 5 and less than 15 then the text “Write number!” will be written. Otherwise, “Wrong number!” will be written.

The comparison can be as complex as you want or need.


var NumberOne=4;
if ((NumberOne>5)&&(NumberOne<15)||(NumberOne==25)) {
document.write("Right number!");
}
else {
document.write("Wrong number!");
}

The comparison now will return true if the variable NumberOne is greater than 5 but less than 15 or it can be 25.

Switch statement

Using switch statement you can take a single variable value and execute a different block of code based on the value of the variable.


switch (NumberOne)

Instead of one variable you can have an addition of variables or any other sort of calculations.
Below you can see how a full switch statement looks like.


var NumberOne=4;
switch (NumberOne) {
case 6:
document.write("6 is better than 4");
break;
case 2:
document.write("2 is worst than 4");
break;
default:
document.write("None of the cases are true");
}

The switch statement begins based on the NumberOne variable.
Next, a case is given (when the value of the variable NumberOne is 6) with the code to be executed if it is true.
The break statement after the first case tells the browser to leave the switch case block.
After that we have another case with another code to be executed if the case turns to be true and another break statement.
Finally, the default statement is used when none of the cases is true.

Using the conditional operator

The conditional operator (also known as the ternary operator) can be use to assign a value to a variable based on a condition.


var NumberOne=4;
var NumberTwo;
if (NumberOne==4) {
NumberTwo=NumberOne*3;
}
else {
NumberTwo="Your number can not be calculated!"
}
document.write(NumberTwo);

Initially, the variable NumberTwo is declared with no value. The condition says that if the variable NumberOne has the value of 4 then the value of the variable NumberTwo will be the value of NumberOne multiply by 3. If you execute the code then the browser will display the message “12” (which is 4 multiply by 3).

Using the conditional operator allows you to shorten the amount of code you have to write.


var NumberOne=5;
var NumberTwo;
NumberOne==4 ? NumberTwo=NumberOne*3 : NumberTwo="Your number can not be calculated!";
document.write(NumberTwo);

After the two variables are created instead of starting with the if statement we can write just the condition followed by a question mark. After that we have the two possible values with a colon between them.

If there is only one code to execute in your block then you can even omit the curly braces and since JavaScript is not concerned with white spaces or line breaks you can even have all code on a single line.


var NumberOne=4; var NumberTwo;
if (NumberOne==4) NumberTwo=NumberOne*3; else NumberTwo="Your number can not be calculated!";
document.write(NumberTwo);

Or everything on a single line.


var NumberOne=4; var NumberTwo; if (NumberOne==4) NumberTwo=NumberOne*3; else NumberTwo="Your number can not be calculated!";
document.write(NumberTwo);

Leave a Reply