If-else or conditional statements in JavaScript

Conditional statements in JavaScript

When you write a code for developing your web page, you may have the situations where you want to handle some statements of your code with some conditions. For example, a driving license issuing authority may allow people to have driving license only, if they have attained the age of 18 years or more. Like many other programming languages, JavaScript also allows you to set conditions in your code based on logical and comparative tests at run time. The result so evaluated will be either true or false.

The following conditional statements can be used in JavaScript.

  • The if statement
  • The if….else statement
  • The if….else if….else statement

The if statement in JavaScript

The if statement executes block of code only if the condition applied evaluates to true otherwise the block of code will be skipped. This is the simplest condition in JavaScript programming language. The general syntax of if statement is shown below.

if(condition){
         Block of code;
}

The flowchart of simple if statement is shown below.

if statement or condition in JavaScript, www.programmingtutorial.in
if statement

Let us now write a simple code to explain if statement.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conditional statements</title>
</head>
<body>
    <h3>If statement to check the entry for driving license</h3>
    <script>
        var age=20;
        if(age>=18)
        {
            document.write("Congratulations, you can apply for Driving License");
        }
   </script>    
</body>
</html>

Will give result as:

Congratulations, you can apply for Driving License

The if….else statement in JavaScript

In simple if statement, the block of code executes only, if the condition applied becomes true. In order to enhance this simple if statement, the if…else statement comes to play. The if…else statement gives you an opportunity to execute your block of code at two levels which means you can execute any one of two blocks of codes. If your condition become true, the first block of code will get executed otherwise the second block of code will be executed. The syntax of if…else statement is given below.

if(condition){
       First block of code;  // condition is true
}
else(condition){
       Second block of code;    // condition is false
}

The flowchart of if…else statement is shown below.

if...else statement, www.programmingtutorial.in
if…else statement

Let us now write a code to execute if…else statement.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conditional statements</title>
</head>
<body>
    <h3>If...else statement to check the whether you are adult or child</h3>
    <script>
        var age=16;
        if(age>=18)
        {
            document.write("You are adult");
        }
        else
        {
            document.write("You are child");
        }
   </script>    
</body>
</html>

The above code will produce the following results.

“You are child”. Because the age is set as 16 which is less than 18. If you set age as 18 or more, the result will become, “You are adult”.

The if…else if….else statement in JavaScript

The simple if statement allows you you to check condition at one level only which means it works only if condition applied is true. In the same way, the if…else statement allows you to check conditions at any one of two levels i.e. if it is either true or false. But, what to do when there are many conditions in your code to execute. This can be achieved by using if…else if….else statement in your code. It combines multiple if…else statements.

The general syntax is shown below.

if(condition1){
     Statements to execute;
}
else if(condition2){
      Statements to execute;
}
else{
      Statements to execute;
}
if...else if...else statement , www.programmingtutorial.in
if…else if…else statement

Let us now write a code to declare result of exam.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conditional statements</title>
</head>
<body>
    <h3>If...else if...else statement to check the exam result</h3>
    <script>
        var m1=75, m2=80, m3=40, m4=65, m5=85;
        var marks_obtained, percentage;
        marks_obtained=m1+m2+m3+m4+m5;
        percentage=(marks_obtained/500)*100;
        if(percentage>=75)
        {
            document.write("Distinction");
        }
        else if(percentage>=60 &amp;&amp; percentage<75)
        {
            document.write("First Division");
        }
        else if(percentage>=45 &amp;&amp; percentage<60)
        {
            document.write("Second Division");
        }
        else if(percentage>=33 &amp;&amp; percentage<45)
        {
            document.write("Third Division");
        }
        else
        {
            document.write("Failed");
        }
   </script>    
</body>
</html>

The above code will produce the result as per the percentage calculation. To execute this code, copy this code and paste it in notepad and then run with browser.

The ternary operator

The ternary operator provides a shorthand of if…else statement. It is represented by question mark (?) symbol. It takes three operands, a condition to check, a value for true and a value for false. Its syntax is

var marks=(condition) ? value1 : value2
var age=25;
var entry=age>18? 'Adult' : 'Child';

It will result as Adult because the age is set as 25 which is more than 18.

Leave a Reply