Decision Making in JavaScript

if statement

if is used to check for a condition whether its true or not. Condition could be any expression that returns true or false. When condition satisfies then statements following if statement are executed.

Syntax

if(condition)
{
    statement1
    statement2
    ...
}

If you have only one statement to be executed after the if condition then you can drop the curly braces ({ }). For more than one statement use curly braces.

if(condition)
    statement

But still its good practice to use curly braces. It will help to easily manage and understand your code.

Example

<script>

if(5>4)
{
    document.write("yes 5 is greater than 4");
    document.write("<br />" + "JavaScript is fun");
    document.write("<br />");
}
/********outputs*********
  yes 5 is greater than 4
  JavaScript is fun
************************/

if(true)
    document.write("Ah! a boolean inside condition. Also no curly braces");
//see it works without curly braces
/********outputs*********
  Ah! a boolean inside condition. Also no curly braces
************************/

if(1===3)
{
    document.write("This will not be printed");
}
//since condition is false the statements within if will not be executed.

</script>

else statement

else statements are used with if statements. When if condition gets fail then else statement is executed.

Syntax

if(condition)
{
    statements
}
else
{
    statements
}

You can drop off the curly braces with else too if there is a single statement to be executed within else.

Example

<script>

if(3>4)
{
    document.write("True");
}
else
{
    document.write("False");
}
//outputs False

</script>

else if statement

Suppose there are variety of conditions that you want to check. You can use multiple if statements to do this task. All the if conditions will be checked one by one. But what if you want that if one condition satisfies then don't perform further conditional checks. At this point else if statement is what you need.

Syntax

if(condition)
{
    statements
}
else if(condition)
{
    statements
}
else
{
    statements
}

When every condition fails then final else statement is executed.

Example

<script>

var a=3;
var b=4;

if(a > b)
{
    document.write("a is greater than b");
}
else if(a < b)
{
    document.write("a is smaller than b");
}
else
{
    document.write("Nothing worked");
}
</script>

switch statement

switch statements do the same task that else if statements do. But use switch statements when conditions are more. In that case, switch statements perform better than else if statements.

Syntax

switch(expression)
{
    case value-1: statements; break;

    case value-2: statements; break;

    case value-3: statements; break;

    ............

    case value-n: statements; break;

    default: statements; break;
}

switch evaluates the expression and checks whether it matches with any case. If it matches with any case then statements within that case construct are executed followed by break statement. break statement makes sure that no more case statement gets executed. In case if the expression doesn't match any case value then default case is executed.

There could be any number of statements. No curly braces is needed inside case construct. Also you can omit the break statement in the default construct if default is the last statement within switch.

Example

<script>

var a = 7;

switch(a)
{
	case 1: document.write("one"); break;
	case 2: document.write("two"); break;
	case 3: document.write("three"); break;
	case 4: document.write("four"); break;
	case 5: document.write("five"); break;
	default: document.write("number not found");
}
//outputs three
</script>

Note: Check that I have dropped the break statement for the default case construct. It will work fine but try to put the default statement above case 1 and see the result. Also try this program removing all the break statements.

case value can be any number, character or string. Keep this in mind.

Example

<script>

var i = 'h';

switch(i)
{
	case 'a': document.write("a found"); break;
	case 'b': document.write("b found"); break;
	case 'c': document.write("c found"); break;
	case 'h': document.write("h found"); break;
	case 'string': document.write("string found"); break;
	default: document.write("nothing found");
}
//outputs h found
</script>

Ternary Operator (?:)

Ternary operator is preferred by many programmers. It contains 3 operands that's why the name ternary operator.

Syntax

condition ? if-true-execute-this : if-false-execute-this;

If condition goes right then statement before colon is executed and if false then statement after colon is executed. Multiple statements are not allowed. But you can execute multiple statements by making a function and calling the function if the condition goes true or false accordingly.

Example

<script>

true ? document.write("True value found") : document.write("False value found");
document.write("<br />");
//outputs True value found

(5>4 && 4===3) ? document.write("True") : document.write("False");
document.write("<br />");
//outputs False

var a = (true) ? 1 : 2;
document.write(a);
//outputs 1

</script>

Nested if else or switch statements

You can insert if or else or switch condition within another if or else or switch condition. This is called nesting. You can nest if, else or switch conditions up to any number of level but doing so will make you code more confusing. So use it wisely.

Syntax

if(condition)
{
    if(other condition)
    {
        statements;
    }
}
else
{
    if(other condition)
    {
        statements;
    }
    else
    {
        switch(expression)
        {
            case value-1: statements; break;
            ......
        }
    }
}