JavaScript Tutorial: Understanding Conditional Operators
What are Conditional Operators
Conditional operators are used in JavaScript to perform various actions based on a condition.
There are two conditional operators in JavaScript: if and “?”, the latter is also called the ternary operator and is used for conditional evaluation.
The “If… Else” Statements:
These statements make it possible for you to perform different actions based on different
decisions.
The “if” statement evaluates a condition and executes the code if the result is true.
The “else” statement will execute a code if the same condition is false.
The “else if” allows you to define a new condition to test if the first condition is false.
The “switch” statement allows you to specify several alternative blocks of code to be executed.
The “If” Statement
- The “if” statement uses the following syntax:
if (condition) {
//block of code to be executed if the condition is true
}
- Example:
let num = prompt('How many words are there in the work MEN');
if(num ==3) alert('You are right!');
You should note that you should always write 'if’ in lowercase letters. Using uppercase letters will generate an error in JavaScript.
The “if (…)” statement converts the expression in parenthesis and converts it to Boolean type. The Boolean conversion result can be either:
False: a number 0, an empty string, null, NaN, and undefined.
True: any other values
The code will only be executed if the condition is true. If false, it will need an “else”statement to continue.
The “else” Statement:
The “else” clause allows you to provide an option in case the “if” evaluation returns a false value.
For example:
let num =prompt('How many words are there in the work MEN');
if(num ==3) {
alert('You are right!');
}
else{
alert(“Try again!”);
}
The “else if” statement
- You can use this clause to specify a new condition in case the first is false.
- For example:
let year =prompt('In which year was ECMAScript-2015 specification published?');
if(year <2015){
alert('Too early...');
}elseif(year >2015){
alert('Too late');
}else{
alert('Correct');
}
- You can use multiple “else if” blocks. Also, the ending “else” is not mandatory.
The Ternary Operator (?)
The ternary operator is often used as a shortcut to the “if” statement. It allows you to assign a
variable that depends on a given condition. It is the only JavaScript operator with three operands. Hence, the name ternary!The “?” operator uses the following syntax:
let result = condition ? value1 : value2;
The condition is the expression that will be evaluated to either true or false. Value1 and value2
are expressions with values of any type. Value1 is returned if the condition is true and value2 if the condition is false.
Example:
let accessAllowed = (age > 18) ? true : false;
Using Multiple “?” Operators
You can use multiple “?” operators to return a single value that depends on multiple conditions. You
can get the same result you would if you were using the “else if” statement.Example:
let age =prompt('age?',18);
let message =(age <3)? 'Hey!': (age <18)? 'Hello!' :(age <100) ? Good Evening!':'What an unusual age!';
alert( message );
While some programmers use the “?” operator by keeping the “if… else” syntax, it is not a recommended practice. While the notation is shorter, it is also more difficult to read.
The ternary operator is a very good replacement for an “if…else” statement if the return keyword is used multiple times and when it is the only expression inside of the “if” block. The ternary operator will replace a very lengthy series of “if… else” statements. It is a very light weight way of expressing
the same logic.
Conclusion
You can easily learn JavaScript by practicing more and more. I will come up with more tutorials for your benefit. Type all examples with your own hand. Only reading won't do!! Bye!
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
This is a perfect explanation of using if else statement. I have also been working JS after learning HTML and CSS and couldn't understand the functions fully. Can you guide me where can I find some best videos on the internet regarding JS?
Hey @osblog I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x