- Defining Variables
- Functions
- Scope
- Loops
- Conditionals
- Putting It All Together
- Summary
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Conditionals
Conditionals are how you let your program make decisions for you. Decisions can be based on the data presented (decisions you make) or based on user input, like one of those choose-your-own adventure books. It’s a way to inject some logic into your JavaScript.
Conditionals can be used for everything from outputting different information into the DOM to loading a completely different JavaScript file. They’re very powerful things to have in your JavaScript toolkit.
if Statement
By far, the most common type of conditional is the if statement. An if statement checks a certain condition, and if true, executes a block of code. The if statement is contained within two curly brackets { }, just like the loops we were talking about earlier and the functions before that.
This is best described through a coding sample so let’s move right to it. In Listing 6.5.3 you can see a basic if statement that is being applied inside the loop of our JSON object in Listing 6.5.2. Inside the loop, if the person’s name is “hillisha” the name and mailto link with an exclamation point at the end will be outputting into the document. This output should only be Hillisha’s mailto link without any other names.
Listing 6.5.3. Basic if Statement
/* if "hillisha comes up, add an exclamation point to the end" */
if(name === "hillisha"){
target.innerHTML += '<p><a href="mailto:' + email + '">' + name + '</a>!</p>';
}
if/else Statement
In Listing 6.5.3 the output was only a single person’s name because the condition was set to handle only that one instance of name === “hillisha". Normally you will want do something for the rest of the people in your address book as they are outputted. The if/else statement is for just that purpose.
The if/else statement gives you the capability to create multiple conditions and then a fallback condition for any items that don’t meet the conditions’ criteria. In Listing 6.5.4 you can see that we are still looping through the address book JSON object, but this time we’re setting three conditions:
- if name is hillisha
- if name is paul
- everyone else
Listing 6.5.4. if/else Statement
if(name === "hillisha"){
/* if "hillisha comes up, add an exclamation point to the end" */
target.innerHTML += '<p><a href="mailto:'+ email +'">' + name + '</a>!</p>';
} else if (name === "paul") { // line 5
/* if "paul" comes up, add a question mark */
target.innerHTML += '<p><a href="mailto:' + email + '">' + name + '</a>?</p>';
/* otherwise, output the person as normal*/
} else {
target.innerHTML += '<p><a href="mailto:'+ email +'">' + name + '</a></p>';
}
On line 5 in Listing 6.5.4, you can see that you can combine the two types of statements into else if to create a flow of conditional statements. Using this method, there is no limit to the amount of conditionals you can write. When you get to a large number of conditionals like this, you may consider changing from an if/else statement to a slightly more efficient switch statement.
switch Statement
A switch statement, on the surface, functions almost exactly like an if/else statement. In a switch statement, you first have to set a switch value (the thing you’re going to check for); in this example, we have been checking for name, so that’s the switch value. You then set up cases to test against. We checked for “hillisha” once and also “paul”; those would be the cases used. Last, there is a default state if none of the cases return as true.
The switch statement in Listing 6.5.5 creates the same output as the if/else statement in Listing 6.5.4, but under the hood and in syntax they are pretty different. Let’s take a look at this switch statement.
Listing 6.5.5. Basic switch Statement
switch(name){
case "hillisha":
/* if "hillisha comes up, add an exclamation point to the end" */
target.innerHTML += '<p><a href="mailto:'+ email +'">' + name + '</a>!</p>';
/* break out of the statement */
break;
case "paul":
/* if "paul" comes up, add a question mark */
target.innerHTML += '<p><a href="mailto:'+ email +'">' + name + '</a>?</p>';
/* break out of the statement */
break;
default:
/* otherwise, output the people as normal*/
target.innerHTML += '<p><a href="mailto:'+ email +'">' + name + '</a></p>';
} // end switch statement
if versus switch
Besides syntax there is one major difference in how an if/else statement functions when compared to a switch statement. First, the else in an if/else isn’t required; you can just run an if statement like we did in Listing 6.5.3. In a switch statement, the default option is required.
The iteration mechanism is also different. In the if/else statement in Listing 6.5.4, it still runs the same process over each item in the JSON object. For example, the first person listed is “Hillisha,” so when the conditional statement is executed on that item, it asks three questions:
- Does this name equal “hillisha?” – true
- Does this name equal “paul?” – false, it’s “hillisha”
- Does it equal something else – false
Even if the first condition is true, the statement continues checking against the other conditions. If you have a lot of conditions, this can be very resource intensive. This is where the switch statement really shines.
In the switch statement, after a condition is found to be true, it breaks out of the cases so there are no more checks made. In the switch statement in Listing 6.5.5, the second condition of looking for the name “paul” would look something like this:
- Does this name equal “paul?” – false, it’s “hillisha”
- Does this name equal “paul?” – true, found it!
- Stop asking questions you know the answer to.
Many people like using if/else because it feels more natural, but after you get to a certain conditional count, you should consider moving over to the switch statement for a little better performance in your JavaScript.