JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)
Chapter 8. Conditionals
To make your program think or grant it with dynamisms, you need to take advantage of conditional operations. For example, if you want to make your script do something else if a certain variable obtain a specific value, then a conditional statement is in order.
Conditional Statement If
The most basic conditional statement in JavaScript, and almost every other programming languages out there, is the if conditional statement. The if conditional statement works in a simple manner. You indicate a condition. When that condition is met, the code block within the conditional statement if will be executed. For example:
var x = 2;
x = x + 3;
if(x == 5) {
alert("Adding x, which has the value of 2, with 3 equates to 5.");
}
In the example, variable x was been assigned a value of 2. After that, 3 was added to it. The next statement was a conditional if statement. In the statement, x == 5 is a condition. In human language, it means that x is equal to 5. Below the if statement, an alert statement is placed.
If you read the whole conditional if statement, it will be, “if variable x is equal to 5, then execute alert("Adding x, which has the value of 2, with 3 equates to 5.")”. Since x is equal to 5, then the alert box will appear.
By the way, do note that the assignment operator (=) is different from the ‘equal to’ operator (==). The former is for assigning values while the latter is for comparing values.
So, what will happen if the condition in the conditional statement is not met? For example:
var x = 2;
x = x + 3;
if(x == 6) {
alert("Adding x, which has the value of 2, with 3 equates to 5.");
}
alert("It will not work.");
When you run that script, the alert statement will not be executed. Everything inside the curly braces of the if conditional statement will be ignored, and the next statement after the if block will be executed instead. In this case, the alert("It will not work.") statement will be the only thing that will be executed.
What if you want to add a different code block to execute in case the previous if conditional statement did not trigger? You have two ways to do that. The first one is to use another if statement. For example:
var x = 2;
x = x + 3;
if(x == 6) {
alert("Adding x, which has the value of 2, with 3 does not equate to 6.");
}
if(x == 5) {
alert("Adding x, which has the value of 2, with 3 equates to 5.");
}
The next way will be discussed in the next section.
If Else Statement
Another efficient way to let your script do something if the previous if statement did not trigger is to use the else conditional statement. An else conditional statement is similar to if. The main difference is that the condition of the else statement depends on the previous condition of the if statement that is written before it. For example:
var iLoveYou = 0;
if(iLoveYou == 0) {
alert("Fat chance. I do not love you, too.");
}
else {
alert("Gosh, I did not know that you love me.");
}
In this case, in case that the value of the variable iLoveYou is set to 0, the statements inside if will be triggered, and the else statement will be ignored. In case that the variable takes in a number other than 0, the statements within the if conditional statement will be bypassed, and the statements within the else conditional statement will be executed.
To make it easier for you to understand the else keyword works, then check this alternative version of the code using if statements instead.
var iLoveYou = 0;
if(iLoveYou == 0) {
alert("Fat chance. I do not love you, too.");
}
if (iLoveYou != 0) {
alert("Gosh, I did not know that you love me.");
}
In this version, the else statement is equivalent to the reverse of the condition in the previous if. In the first if statement, the condition read as, “If the variable iLoveYou is equals to 0, the say Fat Chance.”. In the second if statement, the condition reads as, “If the variable iLoveYou is not equal to 0, then say Gosh.” In other words, the else and second if statements means that, “run the statements if the value of variable iLoveYou is other than the numerical integer 0.”
Why use else? You must use it because it is easier, and you do not need to think of other conditions. The computer will immediately assume that you want to do something in case that the previous statement is not satisfied. Instead of thinking of the obverse version of the previous if statement’s condition, the computer will provide it instead.
Else If Statement
To get more control of the conditions you created, you can use else if statements. Else if statements are else statements combined with another condition. You can use it in conjunction with other ifs and else statements. For example:
var emailDomain = "HotMail";
if(emailDomain == "GMail") {
alert("You are using a Google account.");
}
else if(emailDomain == "YMail") {
alert("You are using a Yahoo! account.");
}
else if(emailDomain == "HotMail") {
alert("You are using a HotMail account.");
}
else {
alert("I don’t know your email provider.");
}
Switch Conditional Statement
In case you will be dealing with multiple possible values, using if, else, and else if can be a bit messy. Fortunately, you can use switch statements instead if you will only base your conditions in one variable or expression, and you will need to provide statements for each possible value. For example:
var emailDomain = "HotMail";
switch(emailDomain) {
case "GMail":
alert("You are using a Google account.");
break;
case "YMail":
alert("You are using a Yahoo! account.");
case "HotMail":
alert("You are using a Hot Mail account.");
default:
alert("I don’t know your email provider.");
}
Case Keyword
The case keyword is used to denote that value that you want to compare with the expression or variable that you placed on the switch statement. In case that the value together with the case statement is equal to the value in the switch statement, then the code block in it will be executed.
Break Keyword
The break keyword is used to prevent the browser to execute the next statements, and escape the switch statements. If not placed, the browser will execute all the statements within the switch statements until it sees a break keyword or the end of the switch block.
Default Keyword
The default keyword is the “else” statement of a switch statement. In case no case values are found to satisfy the value in the switch condition, then the code in the default keyword will be executed instead.