Most of the jQuery/JavaScript programs often have multiple (competing) tasks to execute and they usually depend upon some form of condition-verification to decide which task to run. As an example, a program can execute a specific set of statements to invoke a particular action, when a user provides a specific input. Thus, running these statements is conditional upon a specific user input.
For handling such conditional cases, JavaScript provides several constructs: (a) if, (b) if-else, (c) if-"else if"-else, and (d) switch. We can consider the first two forms as simplification of the if-"else if"-else form. All of these constructs rely upon the value of a condition (a variable or an expression). Since jQuery is written on top of JavaScript, we can use these constructs as-is.
With that, let us look at an example that implements the first three conditional expressions. Please note that the example uses the break keyword to break out of the loop once it finds the author being searched.
<!doctype html>
<html>
<div id="idDiv"></div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
// Define arrNobel with some initial values.
var arrNobel = ["Rudyard Kipling", "William Yeats", "George Bernard Shaw", "T. S. Eliot"];
// An if clause: find the author who wrote "Pygmalion".
for (var i=0; i < arrNobel.length; i++) {
if (arrNobel[i] == "George Bernard Shaw") {
elem.innerHTML += "[if] Found " + arrNobel[i] + "<br><br>";
break;
}
}
// An if-else clause: Alas! Mark Twain did not get a Nobel Prize.
for (var i=0; i < arrNobel.length; i++) {
if (arrNobel[i] == "Mark Twain") {
elem.innerHTML += "[if-else] Found " + arrNobel[i] + "<br><br>";
break;
} else {
elem.innerHTML += "[if-else] Searching for Mark Twain... <br>";
}
}
// An if-"else if"-else clause: find more than one authors!
elem.innerHTML += "<br>";
for (var i=0; i < arrNobel.length; i++) {
if (arrNobel[i] == "T. S. Eliot") {
elem.innerHTML += "[if-\"else if\"-else] Found " + arrNobel[i] + "<br>";
} else if (arrNobel[i] == "William Yeats") {
elem.innerHTML += "[if-\"else if\"-else] Found " + arrNobel[i] + "<br>";
} else {
elem.innerHTML += "[if-\"else if\"-else] Searching... <br>";
}
}
</script>
</html>
If we run the above example, then we would see the following text on the browser:
[if] Found George Bernard Shaw [if-else] Searching for Mark Twain... [if-else] Searching for Mark Twain... [if-else] Searching for Mark Twain... [if-else] Searching for Mark Twain... [if-"else if"-else] Searching... [if-"else if"-else] Found William Yeats [if-"else if"-else] Searching... [if-"else if"-else] Found T. S. Eliot
For the if-"else if"-if conditional expression with a more than a handful of conditions, JavaScript provides a more compact version called a switch. This variant allows a program to check if the value of a passed expression (or value) belongs to a set of values.
Stated simply, a switch works by comparing the passed value (or expression) to different values (or cases) from the set. The switch statement provides check for each of these values using the case keyword. The switch starts by comparing the passed value with the first value from the set. If the comparison succeeds, then it executes statements pertaining to the first value and breaks (if we provide the break keyword); otherwise, it falls to the next value and so on. This way, it continues to compare the passed value with each value from the set until it finds a match. Worst case, if the passed value does not match any of the switch values, then it goes to the "default" case and from there, it exits the switch. Note that we must provide a break statement at the end of a given case, if we want the switch to return after it is done processing that case.
To demonstrate a switch statement, let us rewrite our earlier if-"else if"-else example.
<!doctype html>
<html>
<div id="idDiv"></div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
// Define arrNobel with some initial values.
var arrNobel = ["Rudyard Kipling", "William Yeats", "George Bernard Shaw", "T. S. Eliot"];
// A switch statement -- let us find multiple authors!
for (var i=0; i < arrNobel.length; i++) {
switch (arrNobel[i]) {
case "George Bernard Shaw":
elem.innerHTML += '[switch] Author of "Pygmalion": ' + arrNobel[i] + "<br>";
break;
case "Rudyard Kipling":
elem.innerHTML += '[switch] Author of "The Jungle Book": ' + arrNobel[i] + "<br>";
break;
case "Mark Twain":
elem.innerHTML += '[switch] Author of "The Adventures of Tom Sawyer": ' + arrNobel[i] + "<br>";
break;
default:
elem.innerHTML += "[switch] Author not in this list<br>";
break;
}
}
</script>
</html>
If we were to run the above example, then we would see the following text on the browser window:
[switch] Author of "The Jungle Book": Rudyard Kipling [switch] Author not in this list [switch] Author of "Pygmalion": George Bernard Shaw [switch] Author not in this list