Extra Help on if statements


		Curly brackets { } are used to group statements together - like putting cement between bricks to join them into a wall - into a block of statements.

For example, in the following section of a program, if the value of a does turn out to be 6, then both the alert() instructions will be carried out:

if (a == 6)
 {
   alert("How are you?");
   alert("Hello");
 }
x = 5.2;

Now I am going to rewrite that section of code and remove the curly brackets. It looks very similar, doesn't it - particularly since I have indented the lines a small way. However, the effect is very different, as you can see:

if (a == 6)
   alert("How are you?");
   alert("Hello");
x = 5.2;

Because there are no curly brackets in the segment above, the two statements are not joined together. The if still does control what comes after it - but it now only controls the single statement after it, not a block of statements. The fact that the lines are indented a few spaces makes absolutely no difference!

Indenting those lines is rather confusing. It would be a lot easier to understand if the second of the two alert() statements were not indented, as follows:

if (a == 6)
   alert("How are you?");
alert("Hello");
x = 5.2;

The program now matches the diagram on the right and is a lot easier to understand. You can see that only the first alert() statement is under the control of the if statement, and that the second alert() statement isn't!


An if statement can control a block of statements which can include other if statements.

There is nothing to stop you writing if statements like the following:

if (firstVar == 10)
 { a = 2;
   if (secondVar == 13)
    b = 5;
 }

In this case, if the first if statement fails, (i.e. firstVar is not 10), then the second if statement is never executed and secondVar is never tested to see if secondVar is 13.


		Nesting a lot of if ... else statements within each other can be confusing. Make sure you know which else goes with which if!

if (a == 10)
  if (b == 3)
   alert("Option 1");
 else
   alert("Option 2");

The else is badly placed. It isn't clear whether it goes with the first if statement (in which case it will match the left-hand diagram) or the second (in which case it will match the right-hand diagram). In fact, because there are no curly brackets to make things totally unambiguous, the else clause goes with the second if statement.

The block of code would be a lot easier to understand if it were laid out as follows. If you are in any doubt as to how the browser will interpret your program, use curly brackets to make it absolutely clear how the program should proceed:

if (a == 10)
 { if (b == 3)
    alert("Option 1");
   else
    alert("Option 2");
 }


Unlike the instructions that you have met up to now, the if instruction mustn't have a semicolon (;) after the condition inside brackets.

In the previous lessons, you were encouraged to put semicolons at the end of each instruction. Although JavaScript will almost certainly allow you to get away with missing them out, it is a good habit to get into to include them. However, if you put a semicolon at the end of the condition of the if statement, the program gets confused, as in the following example:

if (var1 > 10);
  alert("Too big");

If you wrote that in a program, it would still run but it would always carry out the alert instruction, whether the condition succeeded or not. What's going on here?

Well, consider exactly what that semicolon means. It always means "the instruction finishes here." In the case of instructions such as variable assignment, or alert, then the instruction finishes at the end of the line - or further down the page if you have split the instruction over several lines. That's why the semicolon is useful - to tell the program exactly where the instruction does finish!

However, with the if instruction, the condition inside the brackets is simply the first part of the story! The if statement itself also consists of the instruction or block of instructions that come after it. There may also be an else part, complete with one or more instructions. These are also part of the if instruction.

This means that there must be no semicolon directly after the condition. If there were, the program would say to itself "Well, I've worked out that condition, but it doesn't matter, as here's the end of the if statement!" and carry on with the next instruction willy nilly.

Curiously enough, there is no semicolon after the closing curly bracket, }, either. It isn't really necessary there as a closing curly bracket means that a block of statements is coming to an end anyway.

Happy now?