In this tutorial, we’ll explore the syntax of the ternary operator in JavaScript and some of its common uses.
The ternary operator (also known as the conditional operator) can be used to perform inline condition checking instead of using if...else
statements. It makes the code shorter and more readable. It can be used to assign a value to a variable based on a condition, or execute an expression based on a condition.
Key Takeaways
- The ternary operator in JavaScript allows for inline condition checking, making code shorter and more readable. It accepts three operands: a condition to test, and two expressions separated by a colon. The first expression is executed if the condition is true, and the second if the condition is false.
- The ternary operator can be used for value assignment, executing expressions based on a condition, and checking if a variable is null or undefined. It can also handle multiple conditions, similar to if…else if…else statements, by nesting or chaining conditions within the operator’s expressions.
- While the ternary operator can increase code readability by replacing lengthy if…else statements, overuse of nested ternary operators can make code harder to read. It’s also important to note that the ternary operator requires both a true and a false branch.
Syntax
The ternary operator accepts three operands; it’s the only operator in JavaScript to do that. You supply a condition to test, followed by a questions mark, followed by two expressions separated by a colon. If the condition is considered to be true (truthy), the first expression is executed; if it’s considered to be false, the final expression is executed.
It’s used in the following format:
condition ? expr1 : expr2
Here, condition
is the condition to test. If its value is considered to be true
, expr1
is executed. Otherwise, if its value is considered to be false
, expr2
is executed.
expr1
and expr2
are any kind of expression. They can be variables, function calls, or even other conditions.
For example:
1 > 2 ? console.log("You are right") : console.log('You are wrong');
Using the Ternary Operator for Value Assignment
One of the most common use cases of ternary operators is to decide which value to assign to a variable. Often, a variable’s value might depend on the value of another variable or condition.
Although this can be done using the if...else
statement, it can make the code longer and less readable. For example:
const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
message = 'The numbers array is too long';
} else {
message = 'The numbers array is short';
}
console.log(message); // "The numbers array is too long"
In this code example, you first define the variable message
. Then, you use the if...else
statement to determine the value of the variable.
This can be simply done in one line using the ternary operator:
const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';
console.log(message); // "The numbers array is too long"
Using the Ternary Operator for Executing Expressions
Ternary operators can be used to execute any kind of expression.
For example, if you want to decide which function to run based on the value of a variable, you can do it like this using the if...else
statement:
if (feedback === "yes") {
sayThankYou();
} else {
saySorry();
}
This can be done in one line using the ternary operator:
feedback === "yes" ? sayThankYou() : saySorry();
If feedback
has the value yes
, then the sayThankYou
function will be called and executed. Otherwise, the saySorry
function will be called and executed.
Using the Ternary Operator for Null Checks
In many cases, you might be handling variables that may or may not have a defined value — for example, when retrieving results from user input, or when retrieving data from a server.
Using the ternary operator, you can check that a variable is not null
or undefined
just by passing the variable name in the position of the condition operand.
This is especially useful when the variable is an object. If you try to access a property on an object that’s actually null
or undefined
, an error will occur. Checking that the object is actually set first can help you avoid errors.
For example:
let book = { name: 'Emma', author: 'Jane Austen' };
console.log(book ? book.name : 'No book'); // "Emma"
book = null;
console.log(book ? book.name : 'No book'); // "No book"
In the first part of this code block, book
is an object with two properties — name
and author
. When the ternary operator is used on book
, it checks that it’s not null
or undefined
. If it’s not — meaning it has a value — the name
property is accessed and logged into the console. Otherwise, if it’s null, No book
is logged into the console instead.
Since book
is not null
, the name of the book is logged in the console. However, in the second part, when the same condition is applied, the condition in the ternary operator will fail, since book
is null
. So, “No book” will be logged in the console.
Nested Conditions
Although ternary operators are used inline, multiple conditions can be used as part of a ternary operator’s expressions. You can nest or chain more than one condition to perform condition checks similar to if...else if...else
statements.
For example, a variable’s value may depend on more than one condition. It can be implemented using if...else if...else
:
let score = '67';
let grade;
if (score < 50) {
grade = 'F';
} else if (score < 70) {
grade = 'D'
} else if (score < 80) {
grade = 'C'
} else if (score < 90) {
grade = 'B'
} else {
grade = 'A'
}
console.log(grade); // "D"
In this code block, you test multiple conditions on the score
variable to determine the letter grading of the variable.
These same conditions can be performed using ternary operators as follows:
let score = '67';
let grade = score < 50 ? 'F'
: score < 70 ? 'D'
: score < 80 ? 'C'
: score < 90 ? 'B'
: 'A';
console.log(grade); // "D"
The first condition is evaluated, which is score < 50
. If it’s true
, then the value of grade
is F
. If it’s false
, then the second expression is evaluated which is score < 70
.
This keeps going until either all conditions are false
, which means the grade’s value will be A
, or until one of the conditions is evaluated to be true
and its truthy value is assigned to grade
.
CodePen Example
In this live example, you can test how the ternary operator works with more multiple conditions.
If you enter a value less than 100, the message “Too Low” will be shown. If you enter a value greater than 100, the message “Too High” will be shown. If you enter 100, the message “Perfect” will be shown.
See the Pen
Ternary Operator in JS by SitePoint (@SitePoint)
on CodePen.
Conclusion
As explained in the examples in this tutorial, the ternary operator in JavaScript has many use cases. In many situations, the ternary operator can increase the readability of our code by replacing lengthy if...else
statements.
Related reading:
- 25+ JavaScript Shorthand Coding Techniques
- Quick Tip: How to Use the Spread Operator in JavaScript
- Back to Basics: JavaScript Object Syntax
- JavaScript: Novice to Ninja
FAQs on How to Use the Ternary Operator in JavaScript
What is the Syntax of the Ternary Operator in JavaScript?
The ternary operator in JavaScript is a shorthand way of writing an if-else statement. It is called the ternary operator because it takes three operands: a condition, a result for true, and a result for false. The syntax is as follows:condition ? value_if_true : value_if_false
In this syntax, the condition is an expression that evaluates to either true or false. If the condition is true, the operator returns the value_if_true
. If the condition is false, it returns the value_if_false
.
Can I Use Multiple Ternary Operators in a Single Statement?
Yes, you can use multiple ternary operators in a single statement. This is known as “nesting”. However, it’s important to note that using too many nested ternary operators can make your code harder to read and understand. Here’s an example of how you can nest ternary operators:let age = 15;
let beverage = (age >= 21) ? "Beer" : (age < 18) ? "Juice" : "Cola";
console.log(beverage); // Output: "Juice"
Can Ternary Operators Return Functions in JavaScript?
Yes, the ternary operator can return functions in JavaScript. This can be useful when you want to execute different functions based on a condition. Here’s an example:let greeting = (time < 10) ? function() { alert("Good morning"); } : function() { alert("Good day"); };
greeting();
How Does the Ternary Operator Compare to If-Else Statements in Terms of Performance?
In terms of performance, the difference between the ternary operator and if-else statements is negligible in most cases. Both are used for conditional rendering, but the ternary operator can make your code more concise.
Can Ternary Operators be Used Without Else in JavaScript?
No, the ternary operator in JavaScript requires both a true and a false branch. If you don’t need to specify an action for the false condition, consider using an if statement instead.
How Can I Use the Ternary Operator with Arrays in JavaScript?
You can use the ternary operator with arrays in JavaScript to perform different actions based on the condition. Here’s an example:let arr = [1, 2, 3, 4, 5];
let result = arr.length > 0 ? arr[0] : 'Array is empty';
console.log(result); // Output: 1
Can Ternary Operators be Used for Multiple Conditions?
Yes, you can use ternary operators for multiple conditions. However, it can make your code harder to read if overused. Here’s an example:let age = 20;
let type = (age < 13) ? "child" : (age < 20) ? "teenager" : "adult";
console.log(type); // Output: "teenager"
Can Ternary Operators be Used in Return Statements?
Yes, you can use ternary operators in return statements. This can make your code more concise. Here’s an example:function isAdult(age) {
return (age >= 18) ? true : false;
}console.log(isAdult(20)); // Output: true
Can Ternary Operators be Used with Strings in JavaScript?
Yes, you can use ternary operators with strings in JavaScript. Here’s an example:let name = "John";
let greeting = (name == "John") ? "Hello, John!" : "Hello, Stranger!";
console.log(greeting); // Output: "Hello, John!"
Can Ternary Operators be Used with Objects in JavaScript?
Yes, you can use ternary operators with objects in JavaScript. Here’s an example:let user = { name: "John", age: 20 };
let greeting = (user.age >= 18) ? "Hello, Adult!" : "Hello, Kid!";
console.log(greeting); // Output: "Hello, Adult!"
Dianne is SitePoint's newsletter editor. She especiallly loves learning about JavaScript, CSS and frontend technologies.