The easiest condition is an if statement and its syntax is if(condition){ do this … }
. The condition has to be true for the code inside the curly braces to be executed. You can for example test a string and set the value of another string dependent on its value:
var country = 'France';
var weather;
var food;
var currency;
if(country === 'England') {
weather = 'horrible';
food = 'filling';
currency = 'pound sterling';
}
if(country === 'France') {
weather = 'nice';
food = 'stunning, but hardly ever vegetarian';
currency = 'funny, small and colourful';
}
if(country === 'Germany') {
weather = 'average';
food = 'wurst thing ever';
currency = 'funny, small and colourful';
}
var message = 'this is ' + country + ', the weather is ' +
weather + ', the food is ' + food + ' and the ' +
'currency is ' + currency;
Note: Conditions can also be nested.
A condition is a test for something. Conditions are very important for programming, in several ways:
First of all conditions can be used to ensure that your program works, regardless of what data you throw at it for processing. If you blindly trust data, you’ll get into trouble and your programs will fail. If you test that the thing you want to do is possible and has all the required information in the right format, that won’t happen, and your program will be a lot more stable. Taking such precautions is also known as programming defensively.
The other thing conditions can do for you is allow for branching. You might have encountered branching diagrams before, for example when filling out a form. Basically, this refers to executing different “branches” (parts) of code, depending on if the condition is met or not.
In this chapter, we'll learn the base of conditional logic in Javascript.
There is also an else
clause that will be applied when the first condition isn’t true. This is very powerful if you want to react to any value, but single out one in particular for special treatment:
var umbrellaMandatory;
if(country === 'England'){
umbrellaMandatory = true;
} else {
umbrellaMandatory = false;
}
The else
clause can be joined with another if
. Lets remake the example from the previous article:
if(country === 'England') {
...
} else if(country === 'France') {
...
} else if(country === 'Germany') {
...
}
Furthermore you can concatenate different conditions with "or” or “and” statements, to test whether either statement is true, or both are true, respectively.
In JavaScript “or” is written as ||
and “and” is written as &&
.
Say you want to test if the value of x is between 10 and 20—you could do that with a condition stating:
if(x > 10 && x < 20) {
...
}
If you want to make sure that country is either “England” or “Germany” you use:
if(country === 'England' || country === 'Germany') {
...
}
Note: Just like operations on numbers, Condtions can be grouped using parenthesis, ex: if ( (name === "John" || name === "Jennifer") && country === "France")
.
Lets now focus on the conditional part:
if (country === "France") {
...
}
The conditional part is the variable country
followed by the three equal signs (===
). Three equal signs tests if the variable country
has both the correct value (France
) and also the correct type (String
). You can test conditions with double equal signs, too, however a conditional such as if (x == 5)
would then return true for both var x = 5;
and var x = "5";
. Depending on what your program is doing, this could make quite a difference. It is highly recommended as a best practice that you always compare equality with three equal signs (===
and !==
) instead of two (==
and !=
).
Other conditional test:
x > a
: is x bigger than a?
x < a
: is x less than a?
x <= a
: is x less than or equal to a?
x >=a
: is x greater than or equal to a?
x != a
: is x not a?
x
: does x exist?
In order to avoid the if-else hassle, simple logical comparisons can be utilised.
var topper = (marks > 85) ? "YES" : "NO";
In the above example, ?
is a logical operator. The code says that if the value of marks is greater than 85 i.e. marks > 85
, then topper = YES
; otherwise topper = NO
. Basically, if the comparison condition proves true, the first argument is accessed and if the comparison condition is false , the second argument is accessed.