JavaScript

What is a ternary operator in JavaScript

The ternary operator is a conditional operator which can be used as an alternative of the if/else statements in JavaScript code. It helps to write concise and clear code; in this tutorial we will learn to use the ternary operator to write conditions in a more clear, concise and shorthand syntax.

What is a Ternary operator in JavaScript

A ternary operator works in the same way as the if statements. It evaluates a condition, if true, it executes a block of code related to that condition.

Let’s look at the syntax of the ternary operator:

condition ? expression1 : expression2

The ternary operator will first evaluate the test condition and then:

  • Execute the expression1, if the condition is true
  • Execute the expression2, if the condition is false

The ternary operator is called as such because it takes three operands, Now, let’s write a few examples to see how the ternary operator really works:

// code snippet to check if student is Adult or not

let age = prompt('Enter your age:');

// checking age using ternary operator
let result = (age >= 18) ? 'an Adult' : 'not an Adult';

console.log(`You are ${result}.`);

Suppose the user enters 18. Then the condition age >= 18 is checked which evaluates to true. So, the first expression will be assigned to the result variable.

And if the user enters something like 15 then the condition evaluates to false and the second expression pass is assigned to the result variable.

How to use ternary operator to replace of if/else statements

In JavaScript, the ternary operator is used as a replacement for some if/else statements. For example, in the code snippet given below the if statements can be replaced:

// check whether a student passed a test or not
let numbers = 70;
let result;

if (numbers >= 50) {
      result = "You have passed the test.";
} else {
      result = "You failed the test.";
}

console.log(result);

With:

// ternary operator to check the test result
let numbers = 70;
let result =
    (numbers >= 50) ? "You have passed the test." : "You failed the test.";

console.log(result);

How to use nested ternary operators

Ternary operators can be nested inside other ternary operators as expressions:

// code snippet to check the grade of the student
let n = 83;
let grade = (n >= 80) ? "A" : ((n >= 70) ? "B" : ((n >= 60) ? "C": ((n >= 50) ? "D": "F")));

console.log(`Your grade is ${grade }.`);

Conclusion

Ternary operators are used to assign different values to a variable based on different conditions. In most cases it is not recommended to replace if/else statements with ternary operators as it can make code harder to read and understand, but in some cases a single line ternary operator in place of multi line if/else statements can be useful. In this how-to guide we learned to use the ternary operator; Moreover we also learned about nested ternary operators.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.