Javascript IF ELSE IF conditional statement

For a Javascript beginner, understanding the “if else” conditional statement is very much important. Its impossible to write conditional statement without “if else”, so read the article carefully. In this lesson i will try to give you a complete understanding on “if else” conditional statement to build up your desire logic. Keep in mind that the “if” code block will be executed if the underlying condition return TRUE value. If return false value then “else” code block will be executed. So lets start to learn the most common Javascript “if else if” code syntax.

Overview of if else if code execution:javascript if else code syntax

Using if Statement:
Write a javascript function which will compare an input number with a fixed number. To do this example please follow the below code:

<script type="text/javascript">
    function AlertMAX(nNumber)
    {
        var nFixNumber=100;
        if(nNumber>nFixNumber)
            alert ('The Input Number '+nNumber+' is MAX');
    }
</script>

Here if you provide 105 to the function then you will get the alert box because “if(105>100)” condition will return true.

Using if else Statement:
If you provide 50 to the above function then the condition “if(50>100)” will return false & no alert message will be displayed. So if we want an alert “… Not MAX” then we need to introduce “else” code block. Lets modify the above function a bit to introduce “else” code block.

<script type="text/javascript">
function AlertMAX(nNumber)
{
    var nFixNumber=100;
    if(nNumber>nFixNumber)
        alert ('Your supplied number '+nNumber+' is MAX.');
    else
        alert ('Your supplied number '+nNumber+' is Not MAX.');
}
</script>

Hope now you can understand the necessity of “else” code block.

NOTE: In the above examples i have used single line code for both “if” and “else” statement. To write multiple line of code under “if” block or “else” block then just wrap the code between curly braces like:

<script type="text/javascript">
function AlertMAX(nNumber)
{
    var nFixNumber=100;
    if(nNumber>nFixNumber)
    {
        // This code block will be executed if input number>100
        // Write more code here. 
        alert ('Your supplied number '+nNumber+' is MAX.');
    }
    else
    {
        // This code block will be executed if input number<100
        // Write more code here.
        alert ('Your supplied number '+nNumber+' is Not MAX.');
    }
}
</script>

Using if else if else Statement:
Now if you provide 100 to the function then what happened? The condition “100>100” will return false, hence “else” code block will be executed & display alert “.. Not MAX”. But is it true? The alert message should be “Equal”. To do that we need to use “else if” code block. Follow the “else if” syntax from below:

<script type="text/javascript">
    function AlertMAX(nNumber)
    {
        var nFixNumber=100;
        if(nNumber>nFixNumber)
            alert ('Your supplied number '+nNumber+' is MAX.');
        else if(nNumber==nFixNumber) // check this condition
            alert ('Your supplied number '+nNumber+' is EQUAL.');
        else
            alert ('Your supplied number '+nNumber+' is MIN.');
    }
</script>

You can use multiple or nested “else if” block in between “if” and “else” statement like:

<script type="text/javascript">
    function AlertMAX(nNumber)
    {
        var nFixNumber=100;
        if(nNumber>nFixNumber)
            alert ('Your supplied number '+nNumber+' is MAX.');
        else if(nNumber==nFixNumber)
            alert ('Your supplied number '+nNumber+' is EQUAL.');
        else if(............)
            alert ('..........................................');
        else if(............)
            alert ('..........................................');                        
        else
            alert ('Your supplied number '+nNumber+' is MIN.');
    }
</script>
Note: In case of multiple “if else if else” statement, “if” will be the first statement and “else” will be the last. The “else if” statement will be in between “if” statement and “else” statement. If you read the code sequentially you will find the only “if” condition first. If the associated condition satisfy then only “if” code block will be executed and will be exited from whole “if else” code block. If does not satisfy then the next “else if” condition will be checked. If satisfy the condition then “else if” code block will be executed. If does not match with any “else if” condition then the last “else” statement code block will be executed. Keep in mind only one code block will be executed which first satisfy the condition.

Download Code Example

Posted in Client, Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

     

*