Trusted answers to developer questions

What is the ternary operator in JavaScript?

Get Started With Machine Learning

Learn the fundamentals of Machine Learning with this free course. Future-proof your career by adding ML skills to your toolkit — or prepare to land a job in AI or Data Science.

The conditional ternary operator assigns a value to a variable based on some condition. It is used in place of the if statement.

The ternary operator is the only JavaScript operator that takes 3 operators.

Syntax

svg viewer
  • The condition is the expression whose value determines which value is used.
  • The value after the ? is returned if the condition returns true.
  • The value after the : is returned if the condition returns false.

Example

The code below uses the ternary operator to show a simple If else condition testing code, and its equivalent code.

var grade;
var marks = 43;
if (marks < 30) {
grade = 'Fail';
}
else {
grade = 'Pass';
}
console.log(grade)

Multiple Ternary operators

If we want to check multiple variations of the same test case, we can use multiple else if statements. The code below shows how these multiple variants can be implemented through both else if and ternary operators.

var grade;
var marks = 68;
if (marks < 30) {
grade = 'Fail';
}
else if (marks < 60) {
grade = 'Pass'
}
else if (marks < 90) {
grade = 'Distinction'
}
else {
grade = 'High Distinction';
}
console.log(grade)

Multiple Operations

We can also perform more than one operation for a ternary operator, but the commands must be separated with commas. First, the code below sets the value of the grade variable. Then, if the corresponding condition is fulfilled, it prints a message with that variable.

var marks = 43
var grade;
(marks < 30) ? (grade ='Fail', console.log("Better luck next time "))
: (grade ='Pass', console.log("Congratulations "));
console.log(grade)

RELATED TAGS

ternary
javascript
operator
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?