Logical & Relational Comparison > JavaScript — 6
This blog is the sixth part of the JavaScript basics series. The series will cover how to write if & if-else (decision logic), comparison, and logical operators in JavaScript. It’s best suited for someone new to Javascript. Link to the previous blog on functions.
Topic Covered
- Why We Need and How To Write if, if-else
- Comparison Operators and Its Use in if-else
- Cascading if-else-if
- Logical Operators and Its Use In if-else
- The Famous Ternary Operator
Why We Need and How To Write if, if-else
In programming languages, there is a very common scenario where we have to make decisions based on some conditions and execute some code block if that condition evaluates to true. Sample scenario if the student mark is greater then 90 he should get A grade, otherwise, he would get B.
This is so common that most of the programming languages support this with the help of ‘if’ or ‘if-else’.
if(true){
console.log('We are using if conditional logic');
//your statements
}Someone may ask why this ‘else’ part if we can support it through ‘if’, well it's very common to do something if your condition is true (supported by if condition) and then do something else if your condition is false (supported by else condition).
if(true){
console.log('We are using if conditional logic');
//your statements
}else{
console.log('We are using elseconditional logic');
//your statements
}Comparison Operators and Its Use in if-else
Comparison operators are used mainly to compare two variables at a time. List of comparison operators: ‘==’ (equals), ‘===’ (strict equals), ‘>’ (greater than), ‘≥’ (greater than and equal), ‘<’ (less than), ‘≤’ (less than and equal), ‘!=’ (not equals), ‘!==’ (strictly not equals).
Some of them are self-explanatory. Examples of comparison operators
var myVar1 = 5;
var myVar2 = 10;console.log(myVar1 > myVar2); // this will print false
console.log(myVar1 >= '5'); // this will print trueconsole.log(myVar1 < myVar2); // this will print true
console.log(myVar1 <= '4'); // this will print false
Note: Difference Between ‘==’ and ‘===’
‘==’ (equals to) operators will check only for values in the two variables if they are equal or not but in case of ‘===’ (strictly equals to), it will not only check the value of the variable but also the type of the variable.
var intVar = 10;
var strVar = "10";//this will print true even though both are of different type
console.log(intVar == strVar);//this will print false as both are of different type
console.log(intvar === strVar);
Note: Difference Between ‘!=’ and ‘!==’
Similar to equals to operator ‘!=’ will check only the value of the variable but ‘!==’ will check not only for value but also for variable type.
var intVar = 10;
var strVar = "10";//this will print false even though both are of different type
console.log(intVar != strVar);//this will print true as both are of different type
console.log(intvar !== strVar);
How to Use Comparision Operators With if and if-else
In the parenthesis after ‘if’ which is ‘()’, we can write our condition inside it. If the condition evaluates to true the ‘if’ block will be executed. Suppose we want to compare student marks if it's greater then 90 we should print ‘Grade A’.
var mark = 95;
if(mark > 90){
console.log("Grade A");
}Similarly, if we want to compare two variables and print if the result if greater or lesser.
var myVar1 = 5;
var myVar2 = 10;
if(myVar1 > myVar2){
console.log(myVar1 + " is greater then " + myVar2);
}else{
console.log(myVar1 + " is lesser then " + myVar2);
}Cascading if-else-if
Let’s continue with our grade example based on marks. Suppose a condition where we want to print if the grade is greater than 90 then Grade A, greater than 80 then Grade B, greater than 70 then Grade C. Its like multiple conditions one after another. For this type of condition, we have cascading if-else-if.
var mark = 75;
if(mark > 90){
console.log("Grade A");
}else if(mark > 80){
console.log("Grade B');
}else if(mark > 70){
console.log9("Grade C");
}Note: Above cascading if-else-if can be solved by multiple if conditions as follows:
var mark = 75;
if(mark > 90){
console.log("Grade A");
}
if(mark > 80){
console.log("Grade B');
}
if(mark > 70){
console.log9("Grade C");
}But in the above case each and every if condition will be executed, but in the case of cascaded if-else-if, the condition will be checked till one is becoming true. If the first condition evaluates to true the other condition will not be checked only.
Logical Operators and Its Use In if-else
The logical operator is helpful in the case when we want to combine multiple conditions together. Suppose greater than and lesser than, equals to and greater than or any combination.
Note: It's not only limited to two conditional logic, but we can also combine as many conditional operators together as required.
List of logical operators supported by JavaScript ‘&&’ (and), ‘||’ (or) and ‘!’ (not). Suppose we have three variables and we want to check if the first one is greater than the other two.
var myVar1 = 5;
var myVar2 = 10;
var myVar3 = 15;if(myVar1 > myVar2 && myVar1 > myVar3){
console.log(myVar1 + " is greater then " + myVar2 + " and " + myVar3);
}
Similarly, we can use ‘||’ operator for combining multiple conditional operators.
Difference between Logical AND and OR operator
- In the case of Logical AND operator for a result to be true, all the conditions must evaluate to true
- In the case of Logical OR operator even if one condition evaluates to true out of all the conditions the final result is true.
Logical NOT operator will just reverse the result of a conditional operator. It’s like a negation operator.
var myVar1 = 5;
var myVar2 = 10;/*this will print blocm though the condition evaluates to false but NOT operator reverse the result.*/
if( !(myVar1 > myVar2) ){
console.log(myVar1 + " is greater then " + myVar2);
}
The Famous Ternary Operator
This operator is a replacement of if-else condition and it must return a value that can be assigned to a variable.
How to write ternary operator:
- Generally, ternary operators will be on the right-hand side of the assignment operator and left-hand side a variable that will store the returned value.
- The ternary operator starts with parenthesis inside which we write our condition followed by a question mark.
- Followed by a value which will be returned if the condition is true
- Followed by a colon, then a value which will be returned if the condition is false.
Suppose we want to get the max value among two values
var myVar = (5 > 10) ? 5 : 10;
//myvar will have value 10 inside it.This ends the sixth blog of this series, in the next section, we will discuss loops in Javascript in detail.
Reached till here, give me follow up to get the latest stories.
If you enjoyed reading this, don’t forget the applause. 👏
Thank you.
