assignment operation in ternary operator javascript

JS Tutorial
JS Exercise
JS Interview Questions
JS Operator
JS Projects
JS Examples
JS Free JS Course
JS A to Z Guide
JS Formatter

JavaScript Ternary Operator

The Ternary Operator in JavaScript is a shortcut for writing simple if-else statements. It’s also known as the Conditional Operator because it works based on a condition. The ternary operator allows you to quickly decide between two values depending on whether a condition is true or false.

How Does the Ternary Operator Work?

The ternary operator works with three parts:

Condition: A statement that returns true or false.
Value if True: What happens if the condition is true?
Value if False: What happens if the condition is false?

To master conditional logic and writing cleaner code, check out our JavaScript Course , which covers the ternary operator, if-else statements, and other control structures in JavaScript.

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.

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

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

JavaScript Ternary Operator – FAQs

What is the ternary operator in javascript.

The ternary operator is a shorthand for the if-else statement. It takes three operands and is the only operator that takes three operands. It is used to evaluate a condition and return one of two values based on whether the condition is true or false.

What is the syntax of the ternary operator?

The syntax of the ternary operator is: condition ? expressionIfTrue : expressionIfFalse.

How does the ternary operator work?

The ternary operator evaluates the condition. If the condition is true, it returns expressionIfTrue; otherwise, it returns expressionIfFalse.

Can you use the ternary operator for multiple conditions?

Yes, you can nest ternary operators to handle multiple conditions. However, this can make the code hard to read, so it’s usually better to use if-else statements for complex conditions.

Is the ternary operator only used for returning values?

Primarily, the ternary operator is used for returning values based on a condition. However, it can also be used to execute code conditionally, but this is not recommended as it can make the code less readable.

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

How to Use the Ternary Operator in JavaScript – Explained with Examples

Tired of bulky if-else statements? JavaScript's ternary operator offers a powerful solution. This handy tool lets you condense complex conditional logic into a single line, making your code cleaner, more elegant, and efficient.

In this article, we'll take a deep dive into the ternary operator, understanding its syntax and showcasing real-world examples to help you understand how it works to harness its full potential.

Here is What We'll Cover:

What is a ternary operator, how to use the ternary operator.

How to Refactor if-else Statements to Ternary operator

How to Chain Ternary Operators

Best Practices when using the Ternary Operator

A ternary operator is a conditional operator in JavaScript that evaluates a conditional expression and returns either a truthy or falsy value.

To understand how this works, let's take a closer look at its syntax below:

From the syntax above, the condionalExpression is the expression that serves as the evaluation point, determining either a truthy or falsy value.

Following the ? (question mark), the value provided is returned in case the expression evaluates to truthy, whereas the value following the : (colon) is returned if the expression results in a falsy outcome.

The truthyValue and falsyValue can be anything in JavaScript. It can encompass various entities such as functions, values stored in variables, objects, numbers, strings, and more. The ternary operator grants you the flexibility to return any desired value, offering versatility in your code.

Now that we've examined the syntax and its functionality, let's explore how to use the ternary operator to deepen our understanding.

Consider this scenario: we're building a gaming platform that only allows users that are aged 18 and above. We'll design a function to check a user's age. If they're under 18, they'll be denied access; otherwise, they'll gain entry to the platform.

From the code snippet above, we created a function, canAccessPlatform , which evaluates whether a user, represented by their age parameter, meets the requirement to access the platform.

It utilizes a ternary operator to determine if the age is 18 or older, assigning true to shouldAccess if the condition is met, and false otherwise. Finally, it returns the value of shouldAccess , indicating whether the user can access the platform or not.

If the age is 18 or older, the expression becomes true, so the operator returns true after the ? . Otherwise, it returns false. This result is saved in a variable and then returned from the function.

While this basic use case simplifies code and improves readability by replacing unnecessary if-else blocks, it's important to use it sparingly to avoid cluttering and complicating your code. Later, we'll discuss best practices for using the ternary operator.

Here's another example illustrating the use of the ternary operator. We'll create a function to determine whether a number is even or odd. Check out the code snippet below:

From the code snippet above:

We define a function checkEvenOrOdd that takes a number parameter.
Inside the function, we use the ternary operator to check if the number is even or odd.
If the number modulo 2 equals 0 (meaning it's divisible by 2 with no remainder), then the condition evaluates to true, and the string "even" is assigned to the result variable.
If the condition evaluates to false (meaning the number is odd), the string "odd" is assigned to result .
Finally, the function returns the value of result , which indicates whether the number is even or odd.

This code shows how the ternary operator quickly checks if a number is even or odd, making the code easier to read and understand.

How to Refactor if-else Statements to Ternary Operator

An advantage of the ternary operator is avoiding unnecessary if-else blocks, which can complicate code readability and maintenance. In this section, we'll refactor some if-else statements into ternary operations, providing a clearer understanding of how to use ternary operators effectively.

Let's start with our first example:

This function, decideActivity , takes a weather parameter and determines the appropriate activity based on the weather condition.

If the weather is "sunny", it suggests to "go out". Otherwise, it advises to "stay in". When we call the function with different weather conditions like "raining" or "snowing", it outputs the corresponding activity recommendation using console.log() .

For instance, calling decideActivity("raining") will output "stay in". Similarly, decideActivity("snowing") also outputs "stay in". When decideActivity("sunny") is called, it outputs "go out". This straightforward function helps decide on activities based on the weather condition provided.

Now, we can refactor these blocks of code to make them look simpler and neater. Let's see how to do that below:

From the code sample above, this function, decideActivity , uses the ternary operator to quickly determine the activity based on the weather condition. It checks if the weather is "sunny" and assigns "go out" if true, otherwise "stay in".

We've simplified the if-else statements into a one-liner ternary operator. This makes our code cleaner, clearer, and easier to read.

Let take a look at another example:

Let's explain what the code above is doing:

Function Definition : We begin by defining a function named checkNumber that takes a single parameter called number .
Variable Declaration : Inside the function, we declare a variable named result without assigning any value to it yet. This variable will store the result of our check.
Conditional Statement (if-else) : We have a conditional statement that checks whether the number parameter is greater than 0.
If the condition is true (meaning the number is positive), we assign the string "positive" to the result variable.
If the condition is false (meaning the number is not positive, (meaning it is either negative or zero), we assign the string "non-positive" to the result variable.
Return Statement : Finally, we return the value stored in the result variable.
Function Calls :We then call the checkNumber function twice with different arguments: 5 and -2.

When we call checkNumber(5) , the function returns "positive", which is then logged to the console.

Similarly, when we call checkNumber(-2) , the function returns "non-positive", which is again logged to the console.

This function efficiently determines whether a number is positive or non-positive and provides the appropriate result based on the condition.

Let's simplify and improve the code by rewriting it using a ternary operator.

Great job! By refactoring the function and utilizing the ternary operator for conditional evaluation, we've achieved cleaner, more concise, and readable code.

This code, using the ternary operator, feels more concise and elegant. It efficiently determines if a number is positive or non-positive, making the code cleaner and easier to understand. When we call checkNumber(5) , it returns "positive", while checkNumber(-2) returns "non-positive". Overall, the ternary operator enhances the code's readability.

When dealing with conditional checks, sometimes a single condition isn't enough. In such cases, we use 'else-if' statements alongside 'if/else' to incorporate multiple conditions.

Let's take a look at the syntax:

This can be translated into an if/else chain:

Let's explore an example below:

This code above defines a function called checkNumber that takes a number parameter and determines its status (positive, zero, or negative). It utilizes an if-else block with one else-if statement to evaluate the number's value. If the number is greater than 0, it's considered positive and if it's equal to 0, it's zero. Otherwise, it's negative. The function returns the result.

Let's refactor this code using a ternary operator to achieve the same functionality.

That's it! We've refactored the function, and upon closer examination, we can observe that the operators are chained together. Now, let's explore how the chained ternary operator works in the checkNumber function.

In the first ternary operator:

The first part number > 0 checks if the number is greater than 0.
If it's true, the expression returns "Positive".

In the second ternary operator (chained):

If the first condition is false (meaning the number is not greater than 0), it moves to the next part of the expression: number === 0 .
This part checks if the number is equal to 0.
If it's true, the expression returns "Zero".

And the default value:

If neither of the above conditions is true (meaning the number is not greater than 0 and not equal to 0), it defaults to the last part of the expression: "Negative" .
This part acts as the default value if none of the preceding conditions are met.

In summary, the chained ternary operator evaluates multiple conditions in a single line of code. It checks each condition sequentially, and the first condition that evaluates to true determines the result of the entire expression. This allows for concise and efficient conditional logic.

Let's examine another example of a chained ternary operator.

In the given code sample, the ternary operators are chained together to provide different drink suggestions based on the age provided. Each conditional expression in the chain evaluates a specific age range.

If the first condition is true (truthy), it returns 'Enjoy a cocktail'. If false (falsy), it moves to the next conditional expression, and so on. This chaining process continues until a condition evaluates to true. If none of the conditions in the chain are true, the last value is returned as a fallback, similar to the 'else' block in an if/else statement.

The concept of 'chaining' ternary operators involves linking conditional expressions based on the value of the previous expression. This can be compared to the else if structure in an if/else statement, providing a concise way to handle multiple conditions in JavaScript.

Best Practices when Using the Ternary Operator

Using the ternary operator efficiently can significantly enhance code readability and conciseness. In this section, we'll explore key best practices for utilizing the ternary operator effectively.

Keep it simple and readable : Write concise expressions that are easy to understand at a glance. Avoid nesting too many ternary operators or writing overly complex conditions.
Use for simple assignments: Ternary operators are ideal for simple assignments where there are only two possible outcomes based on a condition. For more complex scenarios, consider using if/else statements.
Know when to use it : Use the ternary operator when you need to perform a simple conditional check and assign a value based on the result. It's particularly useful for assigning default values or determining the value of a variable based on a condition.
Test thoroughly : Test your code thoroughly to ensure that the ternary operator behaves as expected under different conditions. Check for edge cases and validate the correctness of the assigned values.
Avoid nested ternaries: While chaining ternaries is possible, excessive nesting can lead to code that is difficult to read. Prefer clarity and consider using if/else for complex conditions.
Keep ternaries short: Aim to keep ternary expressions short and concise. Long ternaries can be difficult to read and understand, leading to code maintenance challenges.

These best practices outline guidelines for effectively utilizing the ternary operator. While they are not strict rules, they offer valuable insights to enhance the clarity and readability of your code.

As we conclude this article, you've gained a comprehensive understanding of the ternary operator—its application in daily coding tasks, converting if/else statements, chaining operators, and best practices. I'm confident that you've acquired valuable insights that will enhance your coding practices using the ternary operator.

Thank you for reading, and see you next time!

Contact information

Would you like to get in touch with me? Don't hesitate to reach out through any of the following channels:

Twitter / X: @developeraspire
Email: [email protected]

A Frontend & Mobile Engineer with over 4 years of experience in the industry, I am passionate about creating engaging, user-friendly, and high-performing websites, mobile and web applications.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Home » JavaScript Tutorial » JavaScript Ternary Operator

JavaScript Ternary Operator

Summary : in this tutorial, you will learn how to use the JavaScript ternary operator to make your code more concise.

Introduction to JavaScript ternary operator

When you want to execute a block if a condition evaluates to true , you often use an if…else statement. For example:

In this example, we show a message that a person can drive if the age is greater than or equal to 16. Alternatively, you can use a ternary operator instead of the if-else statement like this:

Or you can use the ternary operator in an expression as follows:

Here’s the syntax of the ternary operator:

In this syntax, the condition is an expression that evaluates to a Boolean value, either true or false .

If the condition is true , the first expression ( expresionIfTrue ) executes. If it is false, the second expression ( expressionIfFalse ) executes.

The following shows the syntax of the ternary operator used in an expression:

In this syntax, if the condition is true , the variableName will take the result of the first expression ( expressionIfTrue ) or expressionIfFalse otherwise.

JavaScript ternary operator examples

Let’s take some examples of using the ternary operator.

1) Using the JavaScript ternary operator to perform multiple statements

The following example uses the ternary operator to perform multiple operations, where each operation is separated by a comma. For example:

In this example, the returned value of the ternary operator is the last value in the comma-separated list.

2) Simplifying ternary operator example

See the following example:

If the locked is 1, then the canChange variable is set to false , otherwise, it is set to true . In this case, you can simplify it by using a Boolean expression as follows:

3) Using multiple JavaScript ternary operators example

The following example shows how to use two ternary operators in the same expression:

It’s a good practice to use the ternary operator when it makes the code easier to read. If the logic contains many if...else statements, you should avoid using the ternary operators.