Two things that scripting languages need to be able to do are make decisions and repeat themselves.

By make decisions we mean the code should be able to decide whether something is true or false and respond accordingly. In programming we call this conditional logic. Some condition needs to be met. If it is met then some action will occur. One way this is done in Javascript is with an if statement. The basic construct is:

if( some condition equates to true)
{
then do this
}

The curly brackets (or curly braces if you prefer) are used to group together the code that runs when the condition is true. An example would be:

var age= 43;
if(age > 21){
console.info('Old and Wrinkly');
}

JSFIDDLE Demo

If you have been following along you can probably see what is going on here. The variable age is assigned a numeric value of 43. Then the if statement is used to check if age is greater than 21. If it is then the message is displayed in the console.

You can extend the if statement with an else clause - something to happen if the condition is not met ie:


var age= 43;
if(age > 21){
console.info('Old and Wrinkly');
}else{
console.info('Young but dim witted');
}

Notice the second pairing of curly brackets to group together the code that runs on the negative side of the condition.

JSFIDDLE Demo

Conditional Operators

In the above example we used a > condition. There are lots of these operators to chose from to help you check whether some condition is true or not.

Operator Logic

==

is equal to

===

is equal to and of the same data type

!=

not equal to

!==

not equal to value or data type

>

greater than

<

less than

>=

greater than or equal to

<=

less than or equal to

Warning: Computers are simple beasts that at the base level deal in zeros and ones. Therefore with the conditional logic outlined above there are no 'maybe' answers, no grey areas. A condition is either true or false. There are no shades of grey inbetween.

And OR

With an if statement we can check more that one condition using && for a logical 'and' and || for a logical 'or'. (The 'or' || characters are called 'pipes' and might take you a second or two to hunt down on your keyboard - hint try SHIFT BACKSLASH).

So we could have more stringent if statements where one condition has to be true and another one true to run the code.

var age = 43;
var height = 1.8;
if(age < 21 && height > 1.8){
console.info('Hello Young and Tall');
}

Or we could have less stringent if statements where one or another condition can be true to run the code.

var age = 43;
var height = 1.8;
if(age < 21 ||height > 1.8){
console.info('Hello Young or Tall');
}

The if statement is a bread and butter scripting concept. Spend time to experiment to make sure you are happy with this concept as it will occur again and again in your Javascript code.

A (Slight) Case of Overbombing

We can nest if statements inside one another to create more and more complicated conditional logic. Sometimes you will find that a switch / case statement is a more efficient option that lots of nested if statements. A switch / case statements takes an initial value and checks to see if it matches a series of 'cases'. If it does the code associated with that 'case' is run.

var colour = "red";
switch (colour){
    case 'blue':
    console.info('Hello Mr Blue Sky');
    break;
    case 'green':
    console.info('Everythings Gone Green');
    break;
    case 'red':
    console.info('Little Red Corvette');
    break;
    default:
    console.info('No Colour selected');
}

In the above example the variable colour is feed into the switch / case. The first case checks to see if it is equal to 'blue'. It is not so the switch /case moves on. In then checks to see if it is equal to 'green'. It is not so the switch / case moves on. It checks to see if it is equal to 'red'. Hurray it is so the console will output the 'red' message.

Notice the use of the keyword break after each case. This is to stop any more code executing once the code associated with that case has run. Also with a switch / case it is common to provide a default so that is no case is matched you can run some default code instead.

When would you use an if/else as opposed to a switch/case? It is best to use a switch/case when you know you are expecting a value that falls in a particular range. It is more efficiently that having lots of if/else statements, as once the case is matched the code can move on and not make further redundant checks. To illustrate the following if / else statement would be required to perform the switch /case colour example.

var colour = "red";
if(colour == 'blue'){
	 console.info('Hello Mr Blue Sky');
}
if(colour == 'green'){
    console.info('Everythings Gone Green');
}
if(colour == 'red'){
    console.info('Little Red Corvette');
}
if(colour != 'blue' && colour != 'green' && colour != 'red'){
	console.info('No Colour selected');
}

JSFIDDLE Demo

Leave a Comment