Conditional Operator in JavaScript

Conditional operator in JavaScript provides a one line approach for creating a simple conditional statement. It is often used as a shorthand method for if-else statement. It makes the code much more simple, shorter and readable.

The conditional operator (?:) is also known as ternary operator because it takes three operands and perform a conditional test.

The basic syntax for using the conditional operator in JavaScript program is as follows:

conditional_expression ? Value1 : Value2
Or,
variable  = conditional_expression ? Value1 : Value2

In the above syntax, conditional_expression is a boolean expression that gives a boolean value (either true or false).

If the conditonal_expression evaluates true, the value of conditional_expression becomes Value1. If the conditional_expression evaluates false, the value of conditional_expression becomes Value2.

Let’s understand the concept of conditional operator (?:) with the help of different examples.

1. Consider the following statement below:

var a = (x > y) ? 4 : 5

If “x” is greater than “y”, the value of variable a will be 4 otherwise the value of variable a will be 5.

In other simple words, if “x” is greater than “y”, 4 is assigned to the variable a, else 5 is assigned to the variable a. Look at the below figure to understand more clearly.

Example of conditional or ternary operator in javaScript

An if-else statement instead of above conditional statement is as follows:

if(x > y) {
    a = 4;
}
else {
    a = 5;
}

2. Consider another example below:

p ? q : r

This statement states that if p evaluates true, the value of expression becomes q , else the value of the expression becomes false.

variable = conditional_expression ? expression1 : expression2

This statement states that if the conditional_expression returns true, expression1 gets executed, else the expression2 gets executed and the final result stored in a variable.

4. Let’s take another example:

document.write(studentGrade >= 40 ? “Passed” : “Failed”);

This statement contains a conditional expression that evaluates to the string “Passed” if the condition studentGrade >= 40 is true. If the conditional expression studentGrade >= 40 is false, it evaluates the string “Failed”.

JavaScript Conditional (Ternary) Operator Examples

Let’s create a JavaScript program in which we will determine the greatest number between two numbers using conditional or ternary operator in JavaScript.

Example 1:

<script>
  let x = 20, y = 40;
  let z = (x > y) ? 20 : 40;
  document.write("Greater number: " +z);
</script>

Output:
    Greater number: 40

In the preceding example program, the variable x is initialized with 20 and y is initialized with 40. The conditional variable z stores the value returned by the conditional expression.

In the conditional expression, the value of x is not greater than y, the value after the : is assigned to the variable z. If the value of x is greater than y, the value after the ? is assigned to the variable z.

Let’s create a JavaScript program where we will check that a person is eligible to vote or not.

Example 2:

<script>
  let age = prompt("How old are you?");
  let eligible = (age >= 18) ? "You are eligible to vote." : "You are not eligible to vote.";
   alert(eligible);
</script>

When you will run this program, a prompt box will appear on the screen where you will have to enter your age. The age that you will enter, will store in the variable age.

For example, age 18 is entered into the prompt box. This value is assigned to the variable age in the program, as shown in the below figure.

Since the entered value 18 is equal to the eligible age 18, the string value to the right of the ? is assigned to the variable eligible. The alert dialog box displays the following result on the screen.

Output:
       You are not eligible to vote.

Let’s create a JavaScript program using conditional operator to check whether a year is a leap year or not.

Example 3:

<script>
   let total = 0;
   let yearCheck = prompt("Enter a year:");
   let check4 = yearCheck % 4 == 0 ? 1 : 0;
   let check100 = yearCheck % 100 == 0 ? -1: 0;

   let check400 = yearCheck % 400 == 0 ? 1 : 0;
   let total = check4 + check100 + check400;
    alert(total == 1 ? "Leap year" : "Not leap year");
</script>

Output:
     Enter a year: 2000
     Leap year

In the above example program, we have used the following algorithm to check leap year. They are as follows:

1. If the entered year is divisible by 4, add 1.
2. If the entered year is divisible by 100, subtract 1.
3. If the entered year is divisible by 400, add 1.
4. If the total is 1, the year is a leap year, otherwise not a leap year.

The general rule to check a leap year is that if a year is divisible by 4, and it is not divisible by 100, unless it is also divisible by 400.

For example, the years 1900 and 2100 are divisible by 100, but not divisible by 400. Therefore, they are not leap year. However, the year 2000 is a leap year.

In this tutorial, you learned about conditional (ternary) operator in JavaScript with different kinds of example programs. Hope that you will have understood all the basic points related to ternary operator and how to use it in a program. In the next tutorial, we will learn bitwise operators in JavaScript with example programs.
Thanks for reading!!!

JavaScript Conditional (Ternary) Operator Examples

Related Posts

Trending now