Open In App

JavaScript Ternary Operator

Last Updated : 07 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The JavaScript Ternary Operator, also known as the Conditional Operator, offers a better approach to expressing conditional (if-else) statements. It operates on three operands: a condition, a value to return if the condition is true, and a value to return if the condition is false. This article is a comprehensive guide to understanding and using the Ternary Operator effectively in JavaScript.

Examples

Input: let result = (10 > 0) ? true : false;
Output: true
Input: let message = (20 > 15) ? "Yes" : "No";
Output: Yes

Syntax

condition ? trueExpression : falseExpression

Operands

  • condition: Expression to be evaluated which returns a boolean value.
  • value if true: Value to be executed if the condition results in a true state.
  • value if false: Value to be executed if the condition results in a false state.

Characteristics of Ternary Operator

  • The expression consists of three operands: the condition, value if true, and value if false.
  • The evaluation of the condition should result in either a true/false or a boolean value.
  • The true value lies between “?” & “:” and is executed if the condition returns true. Similarly, the false value lies after “:” and is executed if the condition returns false.

Example 1: Below is an example of the Ternary Operator.

Javascript
function gfg() {
    // JavaScript to illustrate 
    // Conditional operator 
    let PMarks = 40
    let result = (PMarks > 39) ?
        "Pass" : "Fail";

    console.log(result);
}
gfg();  

Output
Pass

Example 2: Below is an example of the Ternary Operator.

Javascript
function gfg() {
    // JavaScript to illustrate 
    // Conditional operator 

    let age = 60
    let result = (age > 59) ?
        "Senior Citizen" : "Not a Senior Citizen";

    console.log(result);
}
gfg();  

Output
Senior Citizen

Example 3: Below is an example of nested ternary operators. 

Javascript
function gfg() {
    // JavaScript to illustrate
    // multiple Conditional operators

    let marks = 95;
    let result = (marks < 40) ? "Unsatisfactory" :
        (marks < 60) ? "Average" :
            (marks < 80) ? "Good" : "Excellent";

    console.log(result);
}
gfg(); 

Output
Excellent

Previous Article
Next Article

Similar Reads

Ternary operator vs Null coalescing operator in PHP
Ternary Operator Ternary operator is the conditional operator which helps to cut the number of lines in the coding while performing comparisons and conditionals. It is an alternative method of using if else and nested if else statements. The order of execution is from left to right. It is absolutely the best case time saving option. It does produce
3 min read
How to Rename an Object Key by the use of the Ternary Operator in JavaScript ?
Renaming object keys in JavaScript is a crucial task. To conduct key renaming conditionally, the ternary operator offers a succinct solution. Using the ternary operator, will provide versatility, especially in complicated circumstances, and enhance readability and maintainability into account when using this method for key renaming. These are the f
2 min read
What are Ternary Operator in JavaScript?
The ternary operator in JavaScript is specified using a condition followed by a question mark and semi-colon (condition ? :). It shortens the decision-making process into a single line, consisting of a condition followed by two statements which are separated by a colon. If the condition is true, the expression after the question mark will be execut
1 min read
PHP | Ternary Operator
If-else and Switch cases are used to evaluate conditions and decide the flow of a program. The ternary operator is a shortcut operator used for shortening the conditional statements. ternary operator: The ternary operator (?:) is a conditional operator used to perform a simple comparison or check on a condition having simple statements. It decrease
3 min read
Use of the Ternary Operator in Conditional Rendering.
In React, conditional rendering helps show different things based on certain conditions. The ternary operator is a concise way to do this quickly and clearly. In this article, we will learn step by step process to use the ternary operator for conditional rendering in React. Syntax: React developers have multiple approaches for implementing conditio
3 min read
What are the Benefits of Using a Ternary Operator ?
The ternary operator, often denoted by the ? : syntax, is a concise way to write conditional expressions in various programming languages. Here are some benefits of using the ternary operator: Conciseness and Readability: The ternary operator allows you to express a conditional statement in a compact and readable form. It can make the code more con
1 min read
How to Find Largest Number using Ternary Operator in PHP?
Given three different numbers, the task is to find the Largest Number using Ternary Operator in PHP. In PHP, the ternary operator (?:) allows you to make a quick decision based on a condition. It is a shorthand method to write an if...else statement. You can use the ternary operator to find the largest number among two or more numbers. Table of Con
2 min read
Ternary Search Visualization using JavaScript
GUI(Graphical User Interface) helps better in understanding than programs. In this article, we will visualize Ternary Search using JavaScript. We will see how the elements are being traversed in Ternary Search until the given element is found. We will also visualize the time complexity of Ternary Search. Refer: Ternary SearchAsynchronous Function i
4 min read
How to use multiple ternary operators in a single statement in JavaScript ?
In this article, we will see how we can use multiple ternary operators in a single statement in JavaScript. Sometimes using conditional statements like if, else, and else if stretches the code unnecessarily and makes the code even more lengthy. One trick to avoid them can be the use of ternary operators. But what if we are to use multiple if-else s
2 min read
Why we should prefer square operator over the dot operator to access the value from the object ?
The square notation should be used as much as possible as compared to the dot notation to access the value from the object in JavaScript. Let's first understand how to obtain the value by using the square notation and dot notation from the object. Square notation: In the square notation the keyName that is passed is treated as a variable and search
3 min read