Conditional Operators

“If” Statement

The if statement outputs a condition base on true and false.Basically it is used to execute a code if and only if a certain condition holds. Let’s see the below example :

let number = Number(prompt(“pick any number between 1 and 10));
If (number > 1 && number < 10) {
console.log(`The ${number} is between 1 and 5`);

Here a prompt is shown to user, asking for any number and if the number is less than 5 the condition becomes true and the code block inside is executed and logs ” The number is less than 5 “.

Let’s see another example :

let number = Number(prompt(“pick any number between 1 and 10));
If (number > 1 && number < 10) {
console.log(`The ${number} is between 1 and 5`);

The above code logs only if number entered by user is between 1 and 10.

” else ” Statement

The else statement is used when we want the code to be executed not just when the condition is true but also when the code handles any other case. Lets see one example using else statement :

let number = Number(prompt(‘pick any number’));
If (number > 0  && number < 10) {
  console.log(`The ${number} is between 0 and 10`);
  } else {
  console.log(`The ${number} is not between 0 and 10`)
  }

Here if the number entered by user is greater than 0 and less than 10, statement becomes true and the code inside it is executed and it displays “The number is between 0 and 10”.And if the number is not in between 0 and 10 it displays “The number is not between 0 and 10”.

” if else ” Statement

If we have more than two paths to choose from we can use multiple if/else statements together. Let’s see one example using if else statement :

let number = Number(prompt(“Pick any number”));
if (number < 10) {
  console.log(`The ${number} is less than 10`);
} else if (number < 100) {
  console.log(`The ${number} is less than 100`);
} else {
  console.log(`This is not the number we want`);
}

This above code will first check if the numberentered by the user is less than 10 or not.If its under 10, the statement becomes trueand the code is executed and it outputs “The number is less than 10” and it’s stops after that .If it’s not under 10 than the statement becomes false (and the code inside it is not executed) and it comes to the second statement and checks if the number entered by user is less than 100 or not.If it justifies the statement it outputs “The number is less than 100”.And if both the statements are false it outputs”This is not the number we want”.

Ternary operator ’?’

A ternary operator first evaluates if the condition is men, first expression is executed if the result is trueand second expression if false.It is the only JavaScript operator that takes three operands.This operator is frequently used as a shortcut for the if statement. Let’s see this example :

let accessAllowed;
let age = Number(prompt(“what is your age”))
if (age > 21) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}
console.log(accessAllowed);

// The same code can be written in single line with ternary operator “?”.

let accessAllowed = (age > 21) ? true : false;

Multiple Operator ’?’

A sequence of question mark operators ? can return a value depends on more than one condition. Lets see an example :

let age = Number(Prompt(“Mention your age”));
let message = (age < 3) ? ‘Hi, kid !:
		  (age < 20) ? ‘Hello kid !:
		  ‘What an unusual age !;
alert ( message );

Lets evaluate what’s happening above. The first line takes an input from user in number. If the age is less than 3, it returns “Hi kid !“,otherwise it continues to the expression after the colon :.It then checks if age is less than 20 and if it’s true, it returns “Hello kid”.Otherwise it continues to the expression after the last colon :and returns “What an unusual age !“.

Conclusion

In this article, we learned about the different types of operators and how to use them. These operators are very building blocks of JavaScript and should be accustomed with.

To learn more about different type’s of operators, view the Reference on the Mozilla Developer Network.

Published 15 Jan 2018

I'm a web developer specializing in react. I make things from scratch, love to capture photos, and write about programming.I am currently searching for job as a front end developer.
Sourav Kumar on Twitter