Conditional expressions allow you to run a program using the operator if. Thus, you can organize your program according to specific conditions. For example, display a success button if a form has been filled in correctly.
To fulfill these conditions, we need several elements: logic and comparison operators. These are binary operators. A binary operator allows you to perform an operation on two elements, as for an addition. Special characters or keywords represent the operators and easily compare numerical values or strings of characters.
Comparison operators
The comparison operators will allow comparing different elements. Globally we find the same operators in all languages, and there are some exceptions like JavaScript.
==: equal===: strictly equal (JavaScript)!=: different!==: strictly different (JavaScript)>: strictly greater<: strictly less<=: greater or equal>=: less than or equal to
/!\ JavaScript has two types of comparators, == and ===. The first one is considered weak (less strict) because it will convert the types before comparing them. The conversion is explained below. It is highly recommended to use the second (strictly equal) type as much as possible to avoid errors.
Differences and similarities
These six comic strips demonstrate different types of comparison by specifying for JavaScript because it has some particularities. Indeed it has a strict comparison as well as a non-strict one. Thus, in the first comic strip, the two characters are the same. There is no difference, i.e., same shape and same color. This corresponds to the triple equal (===). In the second plate, we represent the equal, not strict. Indeed, the two characters have the same color but not the same shape; they have a common point: the color is equal.
In the third comic strip, the character on the left is taller, so the comparison is « taller than ». The fourth comic strip shows the character on the left smaller, corresponding to the « smaller than ». The fifth comic strip illustrates two characters who differ in shape and color; we are in a strict difference. And finally, the sixth plate represents two characters with a different shape but the same color; the difference is not strict.
Code
javascript1console.log(3 < 2); // false
2console.log(1 == '1'); // true
3console.log('Banana' === 'Banana'); // true
4console.log('Banana' !== 'Apple'); // true
5console.log('Banana' != 'Apple'); // true
6console.log(2 <= 3); // true
7console.log(3 >= 3); // true Logical Operators
Logical operators represent or, and, not. They are binary operators.
- && : and
- || : or
- ! : no
Or in Python : and, or, not.
The sky
Here the conditions are made concerning what is possible. In fact, in the first comic strip, we wonder if it is possible for there to be sun or clouds. We can see the sun, and all we need is a condition for it to be true because we are in the OR, there is a green check. In the second comic strip, we are in the AND; we see the sun but no clouds, so the condition is false; there is a red cross. Finally, there is no planet in the last comic strip; this corresponds to the NOT, the condition is false, and there is a red cross.
Code
javascript1const isSun = true;
2const isCloud = false;
3const isPlanet = false;
4
5if (isSun || isCloud) {
6 console.log('It\'s sunny'); // It's sunny
7 console.log('There is no cloud'); // There is no cloud
8}
9
10if (isSun && isCloud) {
11 console.log('There is sun and clouds');
12} else {
13 console.log('There is no sun and clouds'); // There is no sun and clouds
14}
15
16if (!isPlanet) {
17 console.log('This is not a planet'); // This is not a planet
18}
19 Conditional testing
The conditional test is done with if/else, if/elif, or switch depending on the language. These are keywords that allow conditioning the program. The if is to be used for simple conditions. They can be nested, but for better reading comfort, you can use a switch. The else is the default condition.
The switch allows to chain several conditions at the same level. First, we initialize a variable, and then we create the conditions with the case keyword. The break ensures that only the instructions associated with this case will be executed. If the break is not used, the program will continue its execution with the instructions that follow.
The switch is not found in all languages.
Umbrella or sunglasses for today?
In these comic strips, the characters have a specific behavior about the weather. They are, therefore, if / else. Thus, if it is sunny, we wear sunglasses, but otherwise, if we can, we take an umbrella.
Code
javascript1const isSunny = true;
2const isRain = false;
3
4// if
5if (3 > 2) {
6 console.log('3'); // 3
7} else {
8 console.log('2');
9}
10
11// if else if
12if (isSunny) {
13 console.log('Sunglasses'); // Sunglasses
14} else if (isRain) {
15 console.log('Umbrella');
16} else {
17 console.log('Just my coat');
18}
19
20// switch
21const color = 'red';
22switch (color) {
23 case 'yellow':
24 console.log('One yellow pencil');
25 break;
26 case 'red':
27 console.log('One red pencil'); // One red pencil
28 break;
29 default:
30 console.log(`No ${color} pencil`);
31} Shorcuts
You can use shortcuts instead of writing an if, when using simple data. There is the ternary for an if / else, or the || or && for the comparison between two values.
A conversion will be done, and the result will be returned directly to the variable.
The ternary is composed of 3 parts. The first part before the ? corresponds to the condition, the second part between the ? and : corresponds to the value returned if the condition is true and the last part of the: corresponds to the else, i.e., the default value.
The boolean condition is the classical condition; the variable will have the value true in the case of a || if there is at least one true value in the comparison. In this case, the variable will have the value corresponding only to the one that is true. In the case of a &&, the final variable will have the value of the second element compared. This is useful, for example, to display a sentence.
Code
javascript1const exampleTernary = 3 > 2 ? '3' : '2';
2const exampleBoolean = 3 > 2 || 'Hello';
3const exampleBooleanString = 3 > 2 && 'Hello';
4
5console.log(exampleTernary); // 3
6console.log(exampleBoolean); // true
7console.log(exampleBooleanString); // Hello
Conditional expressions help set up multiple cases. You can make simple conditions with if / else or shortcuts like the ternary. If you want to make more complex conditions, you can use the switch depending on the language. Logic and comparison operators are used to implement the conditions.
Feedback
Did you find this content useful?
Your feedback helps us improve our content.