Q772 When coding if-else-if conditions, do I have to include the braces?

You are here: irt.org | FAQ | JavaScript | Misc | Q772 [ previous next ]

It depends. The if statement is fundamentally made up of two parts:

if (expression)
    statement

The if/else statement is:

if (expression)
    statement1
else
    statement2

Now, the statement can either be a single JavaScript statement:

if (expression)
    alert('true')
else
    alert('false)

or made up of multiple JavaScript statements - in which case they must be enclosed within braces:

if (expression) {
    alert('this')
    alert('is')
    alert('true')
}
else {
    alert('this')
    alert('is')
    alert('false')
}

Note that the multiple JavaScript statements when enclosed in braces are equivalent to a single statement, e.g.

{
    alert('this')
    alert('is')
    alert('true')
}

is equivalent to:

    statement1

When nesting if statements, you need to take more care, as in the following, the result s may not be as you might expect:

if (expression1)
    if (expression2)
        statement1
else
    statement2

The else statement actually forms part of the inner if statement. It would have better to write this as:

if (expression1) {
    if (expression2)
        statement1
}
else
    statement2

or, even:

if (expression1) {
    if (expression2
        statement1
    else
        statement2
}

depending on which version is the correct one for what you require.

The following example works perfectly well:

<SCRIPT LANGUAGE = 'JavaScript'><!--
var date = new Date();
var hours = date.getHours();
if ( (hours < 6) || (hours >= 22) )
    document.write("Good Night")
else if ( (hours >= 19) && (hours < 22) )
    document.write("Good Evening")
else if ( (hours >= 6) && (hours < 9) )
    document.write("Good Morning")
else
    document.write("Good Day");
//--></SCRIPT>

but could be rewritten for clarity using (obsolete) braces around the single statements:

<SCRIPT LANGUAGE = 'JavaScript'><!--
var date = new Date();
var hours = date.getHours();
if ( (hours < 6) || (hours >= 22) ) {
    document.write("Good Night");
}
else if ( (hours >= 19) && (hours < 22) ) {
    document.write("Good Evening");
}
else if ( (hours >= 6) && (hours < 9) ) {
    document.write("Good Morning");
}
else {
    document.write("Good Day");
}
//--></SCRIPT>

or indenting the code to show which else goes with which if:

<SCRIPT LANGUAGE = 'JavaScript'><!--
var date = new Date();
var hours = date.getHours();
if ( (hours < 6) || (hours >= 22) )
    document.write("Good Night")
else
    if ( (hours >= 19) && (hours < 22) )
        document.write("Good Evening")
    else
        if ( (hours >= 6) && (hours < 9) )
            document.write("Good Morning")
        else
            document.write("Good Day");
//--></SCRIPT>

From this last version you might be able to begin to see that in the form:

if (expression1)
    statement1

that the statement can actually be another if statement:

if (expression1)
    if (expression2)
        statement1

Or:

if (expression1)
    if (expression2) statement1

In other words an if (expression) does not form a statement on its own, it requires the conditional statement that follows it to make it valid JavaScript statement. The following is illegal and would cause a JavaScript error:

if (expression)