Conditional Statement (switch) in JavaScript

Switch statement is just like if statement with a little modification here and there.

Below is the example of switch. You will get the result as: Front End Language! This time you will not see an alert box displaying the result, instead you will see this text written on the HTML page as we have chosen document.write() function.

var lang="C#";
switch(lang)
{
case "JavaScript":
document.write("Web Development!");
break;
case "C#":
document.write("Front End Language!");
break;
case "SQL":
document.write("Back End language!");
break;
default:
document.write("Not a great choice!");
}

In this, we put condition in switch and then that result is matched with all the subsequent cases. Whichever case value is matched first, those statements will be executed.

break; statement is used to break and come out of that case, so that any other statement won’t be executed.

default: This case is generally placed at the end of all cases and is executed when none of the above cases are matched.

Below is another example where you can put conditions in the cases.

var currentDate = new Date();
var currentHour = currentDate.getHours();
alert("Current Date: " + currentDate);
switch(true)
{
case (currentHour >= 4 && currentHour < 12):
alert("Morning!");
break;
case (currentHour >= 12 && currentHour <= 19):
alert("Afternoon!");
break;
case (currentHour > 19 && currentHour < 4):
alert("Night!");
break;
default:
alert("Invalid value!");
}

Conditional Statements (if…else condition) in JavaScript

This article explains the usage of Conditional Statements like if-else etc in JavaScript. Below codes are explained using Visual Web Developer. You can put this code in a separate .js file (recommended) or can also include in the script tag under head in the HTML file. I am just displaying the conditions and their usage, you can include them in any part of you script.

if condition

if condition is used to check a condition for true or false. The condition to be checked is placed in the round braces after if keyword. If this condition is true, the statements within curly braces of if are executed otherwise not. You can use various operators for the condition like <, > ,>=. <=, == etc. Below is the example

In the below example, you will check if the value in num1 i.e., 10 is greater than 30, then only the alert statement will execute, otherwise not. But this is false, hence you will not see any result with the following statement.

var num1=10;
if(num1 > 30)
{
alert(num1 + " is greater than 30");
}

Now, let’s modify the if condition a little bit. Let’s test for num1 i.e., 10 is less than 30, which is true. Hence you will see an alert box with the message: 10 is less than 30.

var num1=10;
if(num1 < 30)
{
alert(num1 + " is less than 30");
}

Let’s test for equality now. You will see an alert box with the message: 10 is equal to 10.

var num1=10;
if(num1 == 10)
{
alert(num1 + " is equal to 10");
}

Sometimes, we want to execute one or another set of statements based on the result of the condition. Say, execute Statement1 if the condition is true or Statement2 if the condition is false. We use else keyword for this. Below is the example to check whether the number is even or odd.  You will see an alert box with the message: 23 is odd

var num = 23;
if (num % 2 == 0) {
alert(num + " is even.");
}
else {
alert(num + " is odd.");
}

To check multiple conditions, we use if…else if. Now, in the below case even if the second and third conditions are satisfied, it will not execute the third condition as it already got the second condition satisfied first. This is the behavior of if statement that if one condition is satisfied, it won’t even bother to test the following conditions. Hence, the result of the below code is: 15 is less than 20. even if the third condition matches perfectly.

var num = 15;
if (num > 20) {
alert(num + " is greater than 20.");
}
else if (num < 20) {
alert(num + " is less than 20.");
}
else if(num == 15){
alert(num + " is equal to 15.");
}}

We generally put an else in the end to that at least we get a statement that fires if none of the conditions is satisfied. Below code will return: None of the conditions are satisfied.

var num = 15;
if (num > 20) {
alert(num + " is greater than 20.");
}
else if (num == 20) {
alert(num + " is less than 20.");
}
else if(num == 16){
alert(num + " is equal to 15.");
}
else {
alert("None of the conditions are satisfied.");
}

Negation operator (!=): This operator is used to check the inequality of two values.

var num = 23;
if((num % 2) != 0)
{
alert(num + " is odd!");
}

Club two or more conditions

&&: We use this symbol for AND condition. This means the result of if condition is true if all the individual conditions in if are true.

var num1 = 21;
if((num1 % 3 == 0) && (num1 % 7 == 0))
{
alert(num1 + " is divisible by both 3 and 7!");
}

||: We use this symbol for OR condition. This means the result of if condition is true is any of the individual conditions or all the conditions in if are true.

var num1 = 26;
if((num1 % 13 == 0) || (num1 % 2 == 0))
{
alert(num1 + " is either divible by 2 or 13 or both");
}

Ternary Operator (?:) This operator is a short form of if…else.
Syntax: condition ? expr1 : expr2
If the condition is true, then expr1 will be evaluated, otherwise expr2 will be evaluated. You can also assign the value of this operator in any variable. Below example will display alert box with text 2018 is NOT a leap year!

var num = 2018;
(num % 4) == 0 ? alert(num + " is a leap year!") : alert(num + " is NOT a leap year!")