Conditional Statements in TypeScript – if…else

Conditional Statements are used to make decisions in the code and execute a set of statements accordingly. If a condition is true, one set of statements is executed. If the condition is false, no or another set of statements is executed.

There are two types of conditional statements: if and switch. In this article, we will be discussing various forms of if-statements.

if statement

Only if statement is included with a condition. If the result of this condition is true, a set of statements is executed. No else condition is present.
Below is an example when if condition returns false.

var num1:number = 100;
if(num1>200){
console.log("Inside if statement");
}
console.log("Outside if statement");

Below is the output of above code:

Below is an example when if condition returns true.

var num1:number = 100;
if(num1<200){
console.log("Inside if statement");
}
console.log("Outside if statement");

Below is the output of above code:

if…else statement

Here, when the condition is true, if block is executed. When the condition is false, else block is executed.
Below is the example when condition is true and if block is executed.

var num1:number = 100;
if(num1<200){
    console.log("Inside if, as condition is true");
}
else{   
    console.log("Inside else, as condition is false");
}

Below is the output of above code:

Below is the example when condition is false and else block is executed.

var num1:number = 100;
if(num1>200){
    console.log("Inside if, as condition is true");
}
else{   
    console.log("Inside else, as condition is false");
}

Below is the output of above code:

if…else if..else Statement

Below are some sample codes:

var num1:number = 100;
var num2:number = 200;
if(num1>num2){
    console.log(num1 + " is greater than " + num2);
}
else if(num1<num2){   
    console.log(num1 + " is less than " + num2);
}
else{
    console.log(num1 + " is equal to " + num2);
}

Below is the output of above code:

Another Example:

var num1:number = 100;
var num2:number = 100;
if(num1>num2){
    console.log(num1 + " is greater than " + num2);
}
else if(num1<num2){   
    console.log(num1 + " is less than " + num2);
}
else{
    console.log(num1 + " is equal to " + num2);
}

Below is the output of above code:

Nested If

We can nest if statements inside another if or else block. Below is an example related to this:

var num1:number = 100;
var num2:number = 200;
var num3:number = 100;
if(num1>num2){
    console.log(num1 + " is greater than " + num2);
}
else if(num1<num2){   
    console.log(num1 + " is less than " + num2);
    if(num1 == num3){
        console.log(num1 + " is equal to " + num3);
    }
    else{
        console.log(num1 + " is not equal to " + num3);
    }
}
else{
    console.log(num1 + " is equal to " + num2);
}

Below is the output of above code:

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!")