JavaScript Tutorial: Understanding Conditional Operators

in #utopian-io7 years ago

image.png

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.

image.png

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

image.png

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

Sort:  

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

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

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

Coin Marketplace

STEEM 0.25
TRX 0.20
JST 0.036
BTC 94318.14
ETH 3449.94
USDT 1.00
SBD 3.49