Table of contents
1.
Introduction
2.
What is a Ternary Operator in JavaScript?
2.1.
Syntax
2.2.
Parameters
3.
How Does the Ternary Operator Work?
4.
Why Use The Ternary Operator in JavaScript?
5.
Characteristics of Ternary Operator
6.
Examples of JavaScript Ternary Operators
6.1.
Ternary Operator Used Instead of if…else
6.2.
JavaScript
6.3.
JavaScript
6.4.
Nested Ternary Operators 
6.5.
JavaScript
7.
Frequently Asked Questions
7.1.
What is the example of a JavaScript ternary operator?
7.2.
When to use ternary JavaScript?
7.3.
Is ternary faster than if-else?
8.
Conclusion
Last Updated: Oct 20, 2024
Easy

JavaScript Ternary Operator

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

The JavaScript ternary operator is a powerful and concise way to write conditional expressions. It serves as a shorthand for the traditional if-else statement, allowing you to evaluate a condition and return one of two values based on whether the condition is true or false. This operator enhances code readability and reduces complexity by consolidating simple conditionals into a single line.

JavaScript Ternary Operator

Ternary operators or conditional operators are an alternative to if-else statements. This article will discuss JavaScript Ternary Operators and how to implement them. We will also discuss some examples and cases where we can use these operators.

What is a Ternary Operator in JavaScript?

Javascript ternary operators are three operand operators. The javascript ternary operator evaluates a condition. And then executes the code based on the condition. These three operands are separated by “?” and “:”

The statement before “?” is known as the condition. It will get evaluated and gives an answer which can be followed. The statement after “?” or before “:” is the expression that will get executed when the condition is true. And the last statement after “:” is the expression that will be executed when the condition is false.

js ternary operator

Syntax

condition ? expression_when_true : expression_when_false;

Parameters

  • Condition: The expression whose value will act as the condition.
     
  • Expression when true: If the condition is true. Then this statement will get executed.
     
  • Expression when false: If the condition is false. Then this statement will get executed.

How Does the Ternary Operator Work?

  • The ternary operator is a shorthand way to handle conditional logic in JavaScript.
     
  • It uses the syntax: condition ? expressionIfTrue : expressionIfFalse.
     
  • If the condition evaluates to true, the expressionIfTrue will be executed.
     
  • If the condition evaluates to false, the expressionIfFalse will be executed instead.
     
  • The ternary operator can be used to return values or execute expressions based on the outcome of the condition.
     
  • It is a useful alternative to if-else statements for simple conditional expressions, making the code more concise and readable.

Why Use The Ternary Operator in JavaScript?

The ternary operator in JavaScript can be used for several uses. Some of them are listed below:

  • Readability: It enhances the code readability by expressing conditions and their outcomes in a single line.
     
  • Conciseness: It allows you to write conditional statements in a compact form that saves lines of code.
     
  • Avoids Repetition: It replaces the repetitive if-else statements, especially when you wish to assign a value based on some condition.
     
  • Expressions' Functionality: It can also be used within expressions that allow you to assign values conditionally as a part of a larger statement of code.

Characteristics of Ternary Operator

Below are the characteristics of the ternary operator in Javascript.

  • There are three operands in the expression: the condition, value if true, and value if false.
     
  • The condition provided in the ternary operator is evaluated first. Also, the result of the evaluation should be either true/false or a boolean value.
     
  • It allows you to write the conditional expression in a single space line.
     
  • The ternary operators are used to increase the code readability and reduce the code length.

Examples of JavaScript Ternary Operators

The following are the various cases where we can use Javascript ternary operators.

Ternary Operator Used Instead of if…else

The Javascript ternary operators are generally used to replace if-else statements. Consider the following example.

  • JavaScript

JavaScript

// checking the age to determine whether a person is eligible to drive
let age = 16;
let result;

if (age >= 18) {
     result = "You are eligible to drive.";
} else {
     result = "You are not eligible to drive yet.";
}

console.log(result);
You can also try this code with Online Javascript Compiler
Run Code

 

You can replace this with javascript ternary operators:

  • JavaScript

JavaScript

// ternary operator to check the eligibility to drive
let age = 16;
let result =
   (age >= 18) ? "You are eligible to drive." : "You are not eligible to drive yet";
console.log(result);
You can also try this code with Online Javascript Compiler
Run Code

 

The output of both of the programs is same:

You are not eligible to drive yet

 

Nested Ternary Operators 

We can also use javascript ternary operators in a nested manner. Let’s have a look at the example:

  • JavaScript

JavaScript

// program to check if the number is zero, positive or negative
let a = 5;
let result = (a <= 0) ? (a == 0 ? "zero" : "negative") : "positive";
console.log(`This number is a ${result} number.`);
You can also try this code with Online Javascript Compiler
Run Code

 

We should try to avoid the use of nested ternary operators because it makes our code less readable. To check the code you can try on the online javascript compiler.

Frequently Asked Questions

What is the example of a JavaScript ternary operator?

We can use ternary operators to check if a number is zero or not. First, you need to check the condition for equality, then print the statements likewise. The code for it will look like - (num === 0) ? console.log("Number is zero") : console.log("Number is not zero") ;

When to use ternary JavaScript?

Ternary operators are used to make your code more readable and concise. It would be better to use them when you want to decide between two expressions based on some condition. However, it would help if you used the ternary operator when your statements are short.

Is ternary faster than if-else?

Yes, ternary operators are faster than if-else in Javascript. Both constructs are used to make decisions based on some conditions. But as ternary are written in a single line of code, they are slightly fast than if-else.

Conclusion

This article briefly discussed the JavaScript Ternary Operator. We discussed the syntax, parameters, examples, and various cases which can be followed in Javascript ternary operators.

We hope that this blog has helped you enhance your knowledge about Javascript ternary operators, for more information, you can also check out our other articles -

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!

Live masterclass