ternary operator without assignment typescript

• The Ternary Operator in TypeScript
• TypeScript Howtos

TypeScript Operators

Use the ternary operator in typescript, implement nested conditions with the ternary operator in typescript.

In this article, we will briefly introduce the different operators in TypeScript and discuss the ternary operators and how to use them.

Software applications are intended to work with data. Hence, they have designed a way to perform different operations on this data.

Each operation works with one or more data values and generates a final result. These operations can be divided into various groups.

Operands and Operators in TypeScript

Usually, an operator operates on at least one data value called an operand. For example, in the expression 500 + 200 , the values 500 and 200 are two operands, and the + is the operator.

Several operators can be seen in TypeScript. These can be divided into groups based on the nature of each operator’s operation, such as arithmetic, logical, bitwise, relational, etc.

Also, these operators can be grouped based on the number of operands each operator expects. The binary operator has two operands, as shown in the following.

The unary operator takes only one operand.

TypeScript language supports a ternary operator that operates on three operands; it is the shortened format of the if...else syntax. We call it the TypeScript conditional operator.

The TypeScript conditional operator takes three operands. The first is the condition to be evaluated; it can be identified as the if() part in the usual if...else syntax.

The next two operands are the two expressions to be executed based on the evaluated condition results. Hence, the second operand is the expression to be executed when the condition is evaluated to true .

Otherwise, the third operand expression is returned.

• <your_condition> is the condition to be evaluated. It is a boolean expression that returns either true or false .
• <expression_A> is the expression to be returned when the condition is true .
• <expression_B> is the expression to be returned when the condition is false .

The conditional operator is the only ternary operator available in the TypeScript language.

Let’s write a TypeScript code to check the user’s age, which will return a message based on that. First, we will write the conditional logic using ordinary if...else .

The same logic can be written more compactly using the ternary operator.

You will be getting the same output as in the above if...else logic. This is fewer lines than the if...else syntax and is cleaner.

The ternary operator is not limited to a single condition. It also supports multiple conditions.

Let’s look at the nested if...else conditional logic, as shown in the following.

Let’s write the nested conditions above using the ternary operator.

If you transpile the above TypeScript code and run it using node, you will be getting the same output as in the above if...else scenario.

It is recommended to use a conditional operator in your code. It is a one-line expression that makes your code cleaner.

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Related Article - TypeScript Operator

• TypeScript in Operator
• How to Use the keyof Operator in TypeScript
• Exclamation Mark in TypeScript
• Question Mark Operator in TypeScript

Was this page helpful?

Conditional Types

At the heart of most useful programs, we have to make decisions based on input. JavaScript programs are no different, but given the fact that values can be easily introspected, those decisions are also based on the types of the inputs. Conditional types help describe the relation between the types of inputs and outputs.

Conditional types take a form that looks a little like conditional expressions ( condition ? trueExpression : falseExpression ) in JavaScript:

When the type on the left of the extends is assignable to the one on the right, then you’ll get the type in the first branch (the “true” branch); otherwise you’ll get the type in the latter branch (the “false” branch).

From the examples above, conditional types might not immediately seem useful - we can tell ourselves whether or not Dog extends Animal and pick number or string ! But the power of conditional types comes from using them with generics.

For example, let’s take the following createLabel function:

These overloads for createLabel describe a single JavaScript function that makes a choice based on the types of its inputs. Note a few things:

• If a library has to make the same sort of choice over and over throughout its API, this becomes cumbersome.
• We have to create three overloads: one for each case when we’re sure of the type (one for string and one for number ), and one for the most general case (taking a string | number ). For every new type createLabel can handle, the number of overloads grows exponentially.

Instead, we can encode that logic in a conditional type:

We can then use that conditional type to simplify our overloads down to a single function with no overloads.

Conditional Type Constraints

Often, the checks in a conditional type will provide us with some new information. Just like narrowing with type guards can give us a more specific type, the true branch of a conditional type will further constrain generics by the type we check against.

For example, let’s take the following:

In this example, TypeScript errors because T isn’t known to have a property called message . We could constrain T , and TypeScript would no longer complain:

However, what if we wanted MessageOf to take any type, and default to something like never if a message property isn’t available? We can do this by moving the constraint out and introducing a conditional type:

Within the true branch, TypeScript knows that T will have a message property.

As another example, we could also write a type called Flatten that flattens array types to their element types, but leaves them alone otherwise:

When Flatten is given an array type, it uses an indexed access with number to fetch out string[] ’s element type. Otherwise, it just returns the type it was given.

Inferring Within Conditional Types

We just found ourselves using conditional types to apply constraints and then extract out types. This ends up being such a common operation that conditional types make it easier.

Conditional types provide us with a way to infer from types we compare against in the true branch using the infer keyword. For example, we could have inferred the element type in Flatten instead of fetching it out “manually” with an indexed access type:

Here, we used the infer keyword to declaratively introduce a new generic type variable named Item instead of specifying how to retrieve the element type of Type within the true branch. This frees us from having to think about how to dig through and probing apart the structure of the types we’re interested in.

We can write some useful helper type aliases using the infer keyword. For example, for simple cases, we can extract the return type out from function types:

When inferring from a type with multiple call signatures (such as the type of an overloaded function), inferences are made from the last signature (which, presumably, is the most permissive catch-all case). It is not possible to perform overload resolution based on a list of argument types.

Distributive Conditional Types

When conditional types act on a generic type, they become distributive when given a union type. For example, take the following:

If we plug a union type into ToArray , then the conditional type will be applied to each member of that union.

What happens here is that ToArray distributes on:

and maps over each member type of the union, to what is effectively:

which leaves us with:

Typically, distributivity is the desired behavior. To avoid that behavior, you can surround each side of the extends keyword with square brackets.

Indexed Access Types

Using Type['a'] syntax to access a subset of a type.

Mapped Types

Generating types by re-using an existing type.

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request ❤

Last updated: Aug 15, 2024  

The Ultimate Guide to TypeScript Ternary Operator – Syntax and Best Practices

Introduction.

In the world of programming, TypeScript has gained popularity as a superset of JavaScript that offers static typing and additional features to improve development efficiency and code quality. One powerful feature that TypeScript provides is the Ternary Operator, a concise way to write conditional statements. In this blog post, we will explore the syntax and best practices for using the Ternary Operator in TypeScript, along with practical examples to demonstrate its usefulness in various scenarios.

Understanding the Syntax of the Ternary Operator in TypeScript

Basics of the ternary operator.

The Ternary Operator in TypeScript follows a simple syntax structure, consisting of a conditional expression and two possible outcomes. It takes the form condition ? expression1 : expression2 . The condition is evaluated, and if it resolves to true , expression1 is executed. Otherwise, expression2 is executed. Let’s dive deeper into how the Ternary Operator works in TypeScript.

Expressions and conditions

When using the Ternary Operator in TypeScript, you can leverage boolean expressions to evaluate conditions. For example, you can use comparison operators like === or !== to compare values and generate a boolean result. Additionally, you can nest ternary operators inside each other to handle more complex conditions. Let’s explore these concepts in more detail.

Best Practices for Using the Ternary Operator in TypeScript

Maintain readability and clarity.

While the Ternary Operator offers a concise way to write conditional statements, it’s important to use it judiciously and prioritize readability and clarity. One key best practice is to limit the usage of the ternary operator within a single expression to avoid creating overly complex code. Instead, consider splitting complex conditions into separate variables or using if-else statements.

Choosing between the ternary operator and if-else statements

Deciding whether to use the Ternary Operator or if-else statements depends on the specific use case and the desired level of readability. In general, the Ternary Operator is well-suited for short, simple conditions, while if-else statements offer greater flexibility and readability for more complex conditions. Understanding your code’s context and considering the maintainability of the codebase can guide this decision.

Properly handling null and undefined values

When using the Ternary Operator in TypeScript, it’s crucial to handle null and undefined values appropriately to ensure the code behaves as expected. TypeScript provides the nullish coalescing operator ( ?? ) that can be used in conjunction with the Ternary Operator to handle such scenarios. Additionally, nested ternaries can quickly become difficult to understand, so it’s important to avoid unnecessary nesting and prioritize clean, maintainable code.

Practical Examples of Using the Ternary Operator in TypeScript

Simple conditional assignment.

In many cases, developers need to assign values conditionally. The Ternary Operator provides an elegant solution for this. Consider the following example:

In this example, the value of message is assigned based on the condition ( isLoggedIn ). If it evaluates to true , the message will be set to “Welcome back!” If it’s false , the message will be “Please log in.”

Rendering dynamic content in React components

When working with React components, you often need to conditionally render different elements based on specific conditions. The Ternary Operator can be a great choice for this. Consider the following example:

In this example, the AdminPanel component conditionally renders a button based on the isAdmin variable. If isAdmin is true , the button to delete a user will be displayed; otherwise, it will be omitted.

Implementing conditional styling in CSS

The Ternary Operator can also be useful when implementing conditional styling in CSS. Let’s say we have a class that we want to apply conditionally based on a certain state. We can achieve this using the Ternary Operator. Consider the following example:

In this example, the itemClass is dynamically generated based on the isHighlighted variable. If isHighlighted is true , the “highlighted” class will be included, resulting in different styles for the element.

In conclusion, the Ternary Operator in TypeScript provides a concise and powerful way to write conditional statements. Understanding its syntax and best practices ensures that you can leverage it effectively in your code. By following the best practices of maintaining readability, choosing between the Ternary Operator and if-else statements, and properly handling null and undefined values, you can make your code more maintainable and efficient. The practical examples we explored illustrate the versatility of the Ternary Operator, whether for simple conditional assignments, rendering dynamic content in React components, or implementing conditional styling in CSS. As you continue your TypeScript journey, I encourage you to experiment and explore further use cases where the Ternary Operator can help streamline your code.

Related posts:

• Mastering the Ternary Operator in TypeScript – A Complete Guide to Conditional Expressions
• Mastering TypeScript – Your Guide to TypeScript Certification Success
• Mastering the Ternary Operator in Swift – A Comprehensive Guide
• Online TypeScript Compiler – A Comprehensive Guide to Compiler Tools and Resources
• Exploring the Best Online TypeScript Playground – A Comprehensive Guide

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Conditional (ternary) operator

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark ( ? ), then an expression to execute if the condition is truthy followed by a colon ( : ), and finally the expression to execute if the condition is falsy . This operator is frequently used as an alternative to an if...else statement.

An expression whose value is used as a condition.

An expression which is executed if the condition evaluates to a truthy value (one which equals or can be converted to true ).

An expression which is executed if the condition is falsy (that is, has a value which can be converted to false ).

Description

Besides false , possible falsy expressions are: null , NaN , 0 , the empty string ( "" ), and undefined . If condition is any of these, the result of the conditional expression will be the result of executing the expression exprIfFalse .

A simple example

Handling null values.

One common usage is to handle a value that may be null :

Conditional chains

The ternary operator is right-associative, which means it can be "chained" in the following way, similar to an if … else if … else if … else chain:

This is equivalent to the following if...else chain.

Specifications

Browser compatibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Nullish coalescing operator ( ?? )
• Optional chaining ( ?. )
• Making decisions in your code — conditionals
• Expressions and operators guide

Popular Articles

• Typescript In Data Science: Career Prospects (Jun 24, 2024)
• Typescript In Iot Applications: Job Roles (Jun 24, 2024)
• Typescript In Cloud Computing: Career Growth (Jun 24, 2024)
• Typescript In Game Development: Job Opportunities (Jun 24, 2024)
• Typescript In Mobile App Development: Career Prospects (Jun 24, 2024)

TypeScript Ternary

Switch to English

Table of Contents

Introduction

Understanding the typescript ternary operator, examples of using the ternary operator in typescript, tips and tricks, common mistake and how to avoid.

• The TypeScript Ternary operator is a conditional operator that takes three operands: a condition to check, a result for 'true', and a result for 'false'. It is also known as the conditional operator.
• It can be thought of as a shorthand way of writing an if-else statement.
• The syntax of the ternary operator in TypeScript is as follows:
• While the ternary operator is a powerful tool, overuse can lead to code that is difficult to read and understand. Use it sensibly and sparingly.
• You can also nest ternary operators, but be cautious as it can quickly escalate code complexity and decrease readability.

DEV Community

Posted on Jul 1, 2021 • Updated on Jul 31

Ternary Operator: Better Alternatives

The ternary operator is a nice way to write concise value assignments without having to write a more lengthy if/else . For example:

However it's easy to misuse the ternary operator for things where simpler operators could often have been a better choice. So here are some alternatives for common mistakes.

Static true/false assignments:

Nullable assignment (falsy case).

Note: The code above will return null as long as test is falsy .

Nullable assignment (nullish case)

See: Nullish coalescing operator (??)

By the way...

Checking for undefined

I have seen this a few times. I promise.

See: Optional chaining (?.) [elvis operator]

Beware of browser coverage . If you want to use optional chaining safely, it might be a good idea to use TypeScript configured to transpile the code to ES5 with the modules configured to esnext, to use the latest ECMAScript features.

The ternary (but not actually ternary) operator

This is my favorite one, and also an honest mistake. Some people get overexcited with the simplicity of the ternary operator and might think it is just a "shorter" if/else statement.

The single-line if statement is simple and clean enough for that purpose, and we know test ? value = 8 will not work. The ternary operator needs to have an else return value. If you don't need it, use a single-line if .

Another variant

In React, sometimes when we want to render a component if a specific condition is true, we might see something like this.

I would only use a ternary operator for the example below in the case I want to render one component or another.

Wrapping up...

In a nutshell, if your ternary operator does not have a structure like the one below, you should raise an eyebrow and check if there really aren't other simpler alternatives.

Can you think of other examples you have seen of poor use of the ternary operator? Please let me know in the comments below.

Top comments (4)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location United Kingdown
• Work DevRel - open to opportunities
• Joined Jan 2, 2021

Great list, just be careful with Optional chaining, support is only around 90%.

Also what is "The ternary operator with disability" meant to be as I don't think that is a common term and as it reads it comes across as something that could be offensive.

I understand that could just be a language issue so I thought I would ask.

• Location Rio de Janeiro, Brazil
• Education Automation and Control Engineering at CEFET/RJ
• Work Software Developer at Radix Engineering and Software
• Joined Apr 29, 2021

Excellent observation.

I have edited out that bad attempt at humor. I'll try and keep my questionable sense of humor away from my posts. Sorry about that, and thanks for the feedback.

• Location Austin, TX
• Education BS CIS
• Work UI Developer
• Joined Apr 6, 2020

I am guilty of using ternary operator when I could probably use something else. Great read, I'll work on incorporating these ideas.

• Joined Jul 20, 2021

Great content!

Some comments have been hidden by the post's author - find out more

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Writing Python code like Typescript

Muhammad Bima Adi Prabowo - Aug 1

Making a REST API typesafe with React Query and Zod

Noah Falk - Jul 31

How to Fix the Annoying White Space Issue in iOS Safari: A Beginner's Guide with Easy Solutions

swhabitation - Jul 27

JavaScript on the Server: Node.js

Achal Tiwari - Jul 28

We're a place where coders share, stay up-to-date and grow their careers.

JavaScript Ternary Operator – Syntax and Example Use Case

There are many operators in JavaScript, one of which is the ternary operator. In this article, I'll explain what this operator is, and how it can be useful when building applications.

I have a video version of this topic you can check out as well to supplement your learning.

What is the Ternary Operator?

The ternary operator is a conditional operator which evaluates either of two expressions – a true expression and a false expression – based on a conditional expression that you provide.

Here's the syntax:

You have the condition which returns a truthy or falsy value. Truthy values here include true , and non-falsy values. Falsy values here include false , null , 0 , and so on.

After the condition, you have the question mark (which you can think of as "questioning the condition"), followed by the trueExpression . This expression is executed if the condition expression evaluates to true .

After the true expression, you have a colon, followed by the falseExpression . This expression is executed if the condition expression evaluates to false .

The ternary operator returns a value that you can assign to a variable. You cannot use the operator without assigning the returned value to a variable:

The returned value depends on the evaluation of the condition expression. If the condition is true , the returned value returned from trueExpression is assigned to the variable. Else, the returned value from falseExpression will be assigned to the variable.

How to Use the Ternary Operator in Place of if Statements

The ternary operator can be a good replacement for if statements in some cases. It allows you to write concise, cleaner, and easier-to-read lines of code if used well.

Let's see an example:

In this example, we have a score variable with 80 and a scoreRating variable. Then we have an if statement that checks score > 70 . If this condition evaluates to true , the scoreRating variable is assigned "Excellent" , else, it is assigned "Do better" .

We can improve this code with the ternary operator. Here's how.

Remember the syntax: you have the condition, a question mark, the true expression, a colon, and finally a false expression. Let's look at this in code:

This is how we use the ternary operator. The true and false expressions here are strings that will be returned to the scoreRating variable depending on our condition score > 70 .

The true and false expressions can be any kind of expression from function executions to arithmetic operations and so on. Here's an example with a function execution:

Here, you see that as the condition returns false , the false expression, printPoor() is executed which prints "Poor result" to the console. And as the false expression returns "poor", you can see that value assigned to the result variable.

For the rest of this article, I'll be using string true and false expressions for simplicity.

How to Use Nested Ternary Operators

What if you wanted to achieve an if...else if...else statement with a ternary operator? Then you can use nested ternary operators. You should be careful how you use this, however, as it can make your code harder to read.

We have an if-else-if-else statement here where we first check if score > 70 . If this returns true , we assign "Excellent" to the scoreRating variable. If this returns false , we check if score > 50 . If this second condition returns true , we assign "Average" to the variable but if this also returns false, we finally ( else ) assign "Do better" to the variable.

Let's see how to do this with the ternary operator:

Here, you see we have two question marks and two colons. In the first ternary operator, we have the conditional expression score > 70 . After the first question mark, we have the true expression which is "Excellent" . After the first colon, the next expression is supposed to be the false expression. For the false expression, we declare another conditional expression using the ternary operator.

The second condition here is score > 70 . After the second question mark, we have the true expression which is "Average" . After the second colon, we now have another false expression, which is "Do better" .

With this, if the first condition is true, "Excellent" is returned to scoreRating . If the first condition is false, then we have another condition check. If this second condition is true, "Average" is returned to the variable. If this second condition is also false, then we have the final false expression, "Do better", which will be assigned to the variable.

Multiple Ternary Operators Can Make Your Code Unreadable

In the previous examples, we've seen how we can improve our code while maintaining readability. But you have to be careful when using multiple ternary operators.

Imagine we had an extra ternary operator in our previous example:

Here we have three ternary operators, and you can see that things are becoming harder to read.

In cases like this where you need multiple conditions, using an if or switch statement, though requiring longer lines of code, makes you write more readable code.

Wrapping Up

The ternary operator allows you to evaluate conditional expressions and can substitute for if statements in some cases. It allows you to write shorter and cleaner code (even on one line).

In this article, I've shown you how it works, using some if examples and the ternary operator version. I also emphasized that you should be careful when using nested ternary operators as that can then make your code unreadable.

If you enjoyed this piece, please share!

Developer Advocate and Content Creator passionate about sharing my knowledge on Tech. I simplify JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / et al My YT channel: youtube.com/c/deeecode

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

How to Use the Ternary Operator in JavaScript

The ternary operator is a concise way of expressing conditional statements in a single line of JavaScript code. Our expert explains how it works.

Conditional statements allow programmers to control the execution of code based on logical conditions. Like many other programming languages, JavaScript features  if/else statements that achieve this goal.

What Is The Ternary (Conditional) Operator in JavaScript?

An alternative to the if/else statement, the ternary operator allows JavaScript developers to write concise conditional statements. It is written as “?:” and takes three operands; a logical condition, a value to return if true, and a value to return if false . 

But it’s common knowledge among developers that if/else statements with lots of conditions can get messy. They often make scripts unnecessarily long, difficult to debug, and hard to maintain. Fortunately, JavaScript’s ternary operator provides an alternative to the if/else statement, allowing for more concise and maintainable code.

In this article, we’ll write conditional statements with the ternary operator and learn to use it in different situations.

More From Rory Spanton Polynomial Regression: An Introduction

Writing a Simple Expression With the Ternary Operator 

The ternary operator gets its name by being the only operator in JavaScript that takes three operands, or parts. The first part of a ternary operation is a logical condition that returns a true or false value. Then, after a question mark , come two expressions, separated by a colon. The first is an expression to execute if the logical condition is true, while the second expression executes if the condition is false. The generic form of the function is below.

The ternary expression is an alternative to the conventional if/else statement. The if/else statement below is equivalent to the ternary operation above.

Because of its similarities to the if/else statement, using a simple ternary operation is straightforward. Let’s say we have a website where users can make an account. Once users sign in, we want to give them a custom greeting. We can create a basic function to do this using the ternary operator.

This function takes a condition called signedIn , which is a true or false value that relates to whether a user has logged into their account. If the condition is true, the ternary operator returns a personalized greeting. If the condition is false, it returns a generic greeting.

This is a neat way of writing simple logic. If we used an if/else statement instead of a ternary operation, the function would take up more space to achieve exactly the same result.

Evaluate Truthy/Falsy Conditions With Ternary Operator

Just like if/else statements in JavaScript, ternary expressions can evaluate truthy or falsy conditions. These conditions might return true or false values, but might also return other values that JavaScript coerces to be true or false. For example, if a condition returns null , NaN , 0 , an empty string ( “” ) or undefined , JavaScript will treat it as false in a ternary operation.

This behavior comes in handy when dealing with conditions that return missing values. We can use our custom greeting function from the previous example to show this. Giving this function a condition that returns null executes the “false” expression by default.

Although truthy and falsy conditions can be useful, they can also have unintended consequences. For example, we could assign a value of 1  or 0  to our condition signedIn . But a mistake in this assignment could result in signedIn having a NaN or undefined value. JavaScript would then treat the condition as false without any warning, which could lead to unexpected behavior.

To avoid situations like this, we can set conditions that test for exact values. If we only wanted to output a personalized greeting if signedIn has a value of 1 , we could write the following.

Using the Ternary Operator With Many Conditions

The ternary operator can also be an alternative to more complex if/else statements with several conditions. For example, we could check that members on our website are both signed in and have a paid membership before giving them a custom greeting. We can do this in a ternary operation by adding the extra condition using the && operator.

Again, this phrasing is more concise than an if/else statement. But we can go even further with the ternary operator by specifying multiple “else” conditions.

For instance, we could use the ternary operator to determine which stage of life a customer is in based on their age. If we wanted to classify users as children, teenagers, adults, or seniors, we could use the following function ternary operation:

Chaining together ternary operators like this saves plenty of space. Rewriting this function as a chain of if/else statements takes up around twice as many lines.

This is also an example where using if/else statements leads to less readable code. Although the ternary operator displays each condition and its corresponding return value in the same line, the if/else statement separates these pairings. This makes the logic of the if/else code harder to follow at a glance. If used within longer scripts, this might also make such code harder to debug, giving further reason to use the ternary operator.

Strengths and Limitations of the Ternary Operator

As seen above, the ternary operator in JavaScript has many strengths as an alternative to if/else statements.

Strengths of the Ternary Operator in JavaScript

• It can represent conditional statements more concisely than if/else statements
• In cases where conditions and return values are simple, ternary operator statements are easier to read than if/else statements
• As a longstanding feature of JavaScript, it has excellent cross-browser compatibility

Yet there are situations where programmers should avoid using the ternary operator.

Limitations of the Ternary Operator in JavaScript

• Conditional statements with longer expressions can be hard to read with the ternary operator’s inline syntax. These expressions could otherwise be split across many lines in an if/else statement, resulting in better readability.
• Nested conditions are also better expressed as if/else statements than with the ternary operator. Although you can nest conditional statements with the ternary operator, the result is often messy and hard to debug. If/else statements lend themselves better to nested conditions because they are split over many lines. This visual separation makes each condition easier to understand and maintain.

More in JavaScript 8 Common JavaScript Data Structures

Start Using the Ternary Operator in JavaScript

In summary, the ternary operator is a great way of phrasing conditional statements. Although it isn’t suited to dense expressions or nested conditions, it can still replace long if/else statements with shorter, more readable code. Though not to be overused, it is still essential knowledge for any accomplished JavaScript programmer.

Recent Software Articles

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Should the ternary operator be used outside of assignment statements?

Edit This isn't a question of whether or not the ternary operator is harmful . It's about whether or not there's a consensus about whether or not it should be used outside of assignment statements. /Edit

Based on a boolean, I want to call one of two different functions (with no return value). I wrote this bit of javascript:

Which I think looks cleaner than writing out an if-else statement:

My colleagues strongly believe ternary statements should only be used in assignment statements. I can't find style guides that discuss this, probably because languages like Java and C# don't allow this at all (their compilers require ternary operators to return a value). Should this be considered a bad use of the ternary statement? Why?

• Keep in mind that the Jason Voorhees may be assigned maintain that code of yours. –  David Hammen Commented Aug 26, 2015 at 2:37
• 2 @gnat - not a duplicate of that question, which is about general use of ?: in expressions, whereas this is specifically about using it as a replacement for if-else when there is no single value being calculated. –  Jules Commented Aug 26, 2015 at 6:43
• While I'm in two minds as to the appropriateness of the proposed duplicate, this question is still primarily opinion-based, so I don't see any point in reopening it. –  Ixrec Commented Aug 27, 2015 at 21:15
• Why do you think this looks cleaner? Breaking conventions like this is opposite of clean. –  JacquesB Commented Jan 18, 2018 at 17:10

3 Answers 3

Generally speaking, the conditional operator is intended to make an if statement with a value . w = x ? y : z . Thus, if you're using it for side effects, it's counter-intuitive. Valid, but counter-intuitive; and remember that you're writing code for your teammates to read.

• 2 This seems right. Just about every usage example I find, including Wikipedia uses the operator to perform conditional assignment. –  BobbyA Commented Aug 26, 2015 at 17:44

A couple of cases, that are not assignments, where I find ternary operators useful are:

In function arguments: in my opinion

is less error prone than

When you want to call one function or another with identical arguments: again I find

less error prone than

As I see it the key thing in each case is that the ? form has less repetition. Repetition opens up the possibility of changing one instance and forgetting to change the other.

• 6 In these cases though, you're still using the ternary operator to return a value, which, according to syrion's answer above, is an expected usage. –  BobbyA Commented Aug 26, 2015 at 17:35
• @BobbyA what about void functions ? –  pllee Commented Aug 26, 2015 at 20:54

Here is an example where a non-assignment use comes in handy, specifically to call one of two functions.

In a Javascript Promise , which operates on two function arguments, resolve and reject , it is possible to do the following one-liner without violating the intuition of the ternary operator returning a value:

To me the above reads cleaner than:

Note: I know this is similar to this answer , but hopefully easier to understand.

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Software Engineering Stack Exchange. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged javascript or ask your own question .

• Featured on Meta
• Bringing clarity to status tag usage on meta sites
• We've made changes to our Terms of Service & Privacy Policy - July 2024
• Announcing a change to the data-dump process

Hot Network Questions

• 'best poster' and 'best talk' prizes - can we do better determining winners?
• Is my encryption format secure?
• Finding a Linear Algebra reading topic
• Why in QM the solution to Laguerre equations are ONLY Laguerre polynomials?
• Uneven Spacing with Consecutive Math Environments
• Specify geo location of web pages (each is different)
• Is there a way to say "wink wink" or "nudge nudge" in German?
• Extrude Individual Faces function is not working
• Why was I was allowed to bring 1.5 liters of liquid through security at Frankfurt Airport?
• How did Jason Bourne know the garbage man isn't CIA?
• Fourth order BVP partial differential equation
• Why do these finite group Dedekind matrices seem to have integer spectrum when specialized to the order of group elements?
• What is the trade union for postdocs working in Germany?
• Are the peer reviewers of a journal article allowed to voice surprise to the editor at a "minor revision" decision?
• What is the origin and meaning of the phrase “wear the brown helmet”?
• ~1980 UK TV: very intelligent children recruited for secret project
• What is the translation of point man in French?
• Genus 0 curves on surfaces and the abc conjecture
• Easyjet denied EU261 compensation for flight cancellation during Crowdstrike: Any escalation or other recourse?
• Creating a deadly "minimum altitude limit" in an airship setting
• What is the good errorformat or compiler plugin for pyright?
• Unexpected behaviour during implicit conversion in C
• set of words w such that M halts on w is decidable
• Minimum number of oracle call to solve Simon problem by a (NDTM) non-deterministic Turing machine?

Ternary Conditional Operator Typescript

The Typescript conditional operator is a Ternary Operator, which takes three operands. The first operand is a condition to evaluate. It is followed by a question mark ( ? ), then an expression ( expression1 ). It is then followed by a colon ( : ) and second expression ( expression2 ). If the condition is true, then expression1 executes & if the condition is false, then expression2 executes. The conditional operator is a shorthand way to write an If else statement.

The syntax is as follows

Table of Contents

Conditional operator Example

Multiple conditions in ternary operator.

Where condition : is a boolean expression, which returns true false. expression1 : executes if the condition is true. expression2 : executes if the condition is false.

Ternary Operator is an operator which takes three operand. The conditional operator is the only one Ternary Operator in Typescript. If the operator requires two operand, then it is a binary operator. If it requires only one operator, then it is a Unary Operator

Conditional Operator is a shortcut to If condition. The above code is same as the following if statement.

We can also add Multiple Conditions or nested conditions to a Ternary Operator.

The check function is equivalent to the following if else if else statement

• Expressions & Operators
• Precedence & Associativity
• Complete Typescript Tutorial
• Typescript Operators
• Arithmetic Operators
• Unary plus / Unary minus Operators
• Increment/Decrement Operators
• Comparison / Relational Operators
• Equality Operator / Strict Equality Operators
• Ternary Conditional Operators
• Logical Operators
• Bitwise Operators
• Assignment Operators
• Nullish coalescing operator
• Comma Operator in Typescript
• Operator Precedence

Related Posts

Introduction to Typescript. What is TypeScript

Typescript Installation & environment setup

Leave a comment cancel reply.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed .

• DSA with JS - Self Paced
• 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?

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.

Please Login to comment...

Similar reads.

• Web Technologies
• javascript-operators

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Get the Reddit app

TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Strict null checks in ternary operators?

Hi, I have a question that I can't seem to find an answer to, but I assume there is an easy fix for?

I have the following code in a .tsx file (as part of the render method):

This throws Type error: Object is possibly 'null'. TS2531 on the 4 th line of the snippet, even though - logically - it can't be null because I have caught that with the ternary operator. Is there a way to tell TS this without globally disabling strictNullChecks ?

Edit: Thanks all, you guys and gals are amazing, I think I learned like 10 new things just by posting this question, very much appreciated! Sincere props (see what I did there?) to all of you!

By continuing, you agree to our User Agreement and acknowledge that you understand the Privacy Policy .

Enter the 6-digit code from your authenticator app

You’ve set up two-factor authentication for this account.

Enter a 6-digit backup code

Create your username and password.

Reddit is anonymous, so your username is what you’ll go by here. Choose wisely—because once you get a name, you can’t change it.

Reset your password

Enter your email address or username and we’ll send you a link to reset your password

Check your inbox

An email with a link to reset your password was sent to the email address associated with your account

Choose a Reddit account to continue

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Draft for ECMAScript Error Safe Assignment Operator

arthurfiorette/proposal-safe-assignment-operator

Folders and files.

Repository files navigation

Vote on our poll to decide which syntax to use

ECMAScript Safe Assignment Operator Proposal

This proposal is actively under development, and contributions are welcome .

This proposal introduces a new operator, ?= (Safe Assignment) , which simplifies error handling by transforming the result of a function into a tuple. If the function throws an error, the operator returns [error, null] ; if the function executes successfully, it returns [null, result] . This operator is compatible with promises, async functions, and any value that implements the Symbol.result method.

For example, when performing I/O operations or interacting with Promise-based APIs, errors can occur unexpectedly at runtime. Neglecting to handle these errors can lead to unintended behavior and potential security vulnerabilities.

Symbol.result

Usage in functions, usage with objects, recursive handling, using statement, try/catch is not enough, why not data first, polyfilling, using = with functions and objects without symbol.result, similar prior art, what this proposal does not aim to solve, current limitations, help us improve this proposal, inspiration.

• Simplified Error Handling : Streamline error management by eliminating the need for try-catch blocks.
• Enhanced Readability : Improve code clarity by reducing nesting and making the flow of error handling more intuitive.
• Consistency Across APIs : Establish a uniform approach to error handling across various APIs, ensuring predictable behavior.
• Improved Security : Reduce the risk of overlooking error handling, thereby enhancing the overall security of the code.

How often have you seen code like this?

The issue with the above function is that it can fail silently, potentially crashing your program without any explicit warning.

• fetch can reject.
• json can reject.
• parse can throw.
• Each of these can produce multiple types of errors.

To address this, we propose the adoption of a new operator, ?= , which facilitates more concise and readable error handling.

Please refer to the What This Proposal Does Not Aim to Solve section to understand the limitations of this proposal.

Proposed Features

This proposal aims to introduce the following features:

Any object that implements the Symbol.result method can be used with the ?= operator.

The Symbol.result method must return a tuple, where the first element represents the error and the second element represents the result.

The Safe Assignment Operator ( ?= )

The ?= operator invokes the Symbol.result method on the object or function on the right side of the operator, ensuring that errors and results are consistently handled in a structured manner.

The result should conform to the format [error, null | undefined] or [null, data] .

When the ?= operator is used within a function, all parameters passed to that function are forwarded to the Symbol.result method.

When the ?= operator is used with an object, no parameters are passed to the Symbol.result method.

The [error, null] tuple is generated upon the first error encountered. However, if the data in a [null, data] tuple also implements a Symbol.result method, it will be invoked recursively.

These behaviors facilitate handling various situations involving promises or objects with Symbol.result methods:

• async function(): Promise<T>
• function(): T
• function(): T | Promise<T>

These cases may involve 0 to 2 levels of nested objects with Symbol.result methods, and the operator is designed to handle all of them correctly.

A Promise is the only other implementation, besides Function , that can be used with the ?= operator.

You may have noticed that await and ?= can be used together, and that's perfectly fine. Due to the Recursive Handling feature, there are no issues with combining them in this way.

The execution will follow this order:

• getPromise[Symbol.result]() might throw an error when called (if it's a synchronous function returning a promise).
• If an error is thrown, it will be assigned to error , and execution will halt.
• If no error is thrown, the result will be assigned to data . Since data is a promise and promises have a Symbol.result method, it will be handled recursively.
• If the promise rejects , the error will be assigned to error , and execution will stop.
• If the promise resolves , the result will be assigned to data .

The using or await using statement should also work with the ?= operator. It will perform similarly to a standard using x = y statement.

Note that errors thrown when disposing of a resource are not caught by the ?= operator, just as they are not handled by other current features.

The using management flow is applied only when error is null or undefined , and a is truthy and has a Symbol.dispose method.

The try {} block is rarely useful, as its scoping lacks conceptual significance. It often functions more as a code annotation rather than a control flow construct. Unlike control flow blocks, there is no program state that is meaningful only within a try {} block.

In contrast, the catch {} block is actual control flow, and its scoping is meaningful and relevant.

Using try/catch blocks has two main syntax problems :

In Go, the convention is to place the data variable first, and you might wonder why we don't follow the same approach in JavaScript. In Go, this is the standard way to call a function. However, in JavaScript, we already have the option to use const data = fn() and choose to ignore the error, which is precisely the issue we are trying to address.

If someone is using ?= as their assignment operator, it is because they want to ensure that they handle errors and avoid forgetting them. Placing the data first would contradict this principle, as it prioritizes the result over error handling.

If you want to suppress the error (which is different from ignoring the possibility of a function throwing an error), you can simply do the following:

This approach is much more explicit and readable because it acknowledges that there might be an error, but indicates that you do not care about it.

The above method is also known as "try-catch calaboca" (a Brazilian term) and can be rewritten as:

Complete discussion about this topic at #13 if the reader is interested.

This proposal can be polyfilled using the code provided at polyfill.js .

However, the ?= operator itself cannot be polyfilled directly. When targeting older JavaScript environments, a post-processor should be used to transform the ?= operator into the corresponding [Symbol.result] calls.

If the function or object does not implement a Symbol.result method, the ?= operator should throw a TypeError .

The ?= operator and the Symbol.result proposal do not introduce new logic to the language. In fact, everything this proposal aims to achieve can already be accomplished with current, though verbose and error-prone , language features.

is equivalent to:

This pattern is architecturally present in many languages:

• Error Handling
• Result Type
• The try? Operator
• try Keyword
• And many others...

While this proposal cannot offer the same level of type safety or strictness as these languages—due to JavaScript's dynamic nature and the fact that the throw statement can throw anything—it aims to make error handling more consistent and manageable.

Strict Type Enforcement for Errors : The throw statement in JavaScript can throw any type of value. This proposal does not impose type safety on error handling and will not introduce types into the language. It also will not be extended to TypeScript. For more information, see microsoft/typescript#13219 .

Automatic Error Handling : While this proposal facilitates error handling, it does not automatically handle errors for you. You will still need to write the necessary code to manage errors; the proposal simply aims to make this process easier and more consistent.

While this proposal is still in its early stages, we are aware of several limitations and areas that need further development:

Nomenclature for Symbol.result Methods : We need to establish a term for objects and functions that implement Symbol.result methods. Possible terms include Resultable or Errorable , but this needs to be defined.

Usage of this : The behavior of this within the context of Symbol.result has not yet been tested or documented. This is an area that requires further exploration and documentation.

Handling finally Blocks : There are currently no syntax improvements for handling finally blocks. However, you can still use the finally block as you normally would:

This proposal is in its early stages, and we welcome your input to help refine it. Please feel free to open an issue or submit a pull request with your suggestions.

Any contribution is welcome!

• Arthur Fiorette ( Twitter )
• This tweet from @LaraVerou
• Effect TS Error Management
• The tuple-it npm package, which introduces a similar concept but modifies the Promise and Function prototypes—an approach that is less ideal.
• The frequent oversight of error handling in JavaScript code.

This proposal is licensed under the MIT License .

Code of conduct

Security policy, sponsor this project, contributors 3.

• JavaScript 100.0%

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Java Ternary without Assignment

Is there a way to do a java ternary operation without doing an assignment or way to fake the assingment?

I like how succinct ternary code looks when doing a bunch of if/then/elses.

I'm hoping to be able to call one of two void functions based on a boolean algebra statement.

Something like:

(bool1 && bool2) ? voidFunc1() : voidFunc2();

My functions are of return type void , so if there is a way to fake this in an assignment to make it work, then I"m okay with that... I would like to see how to do it though :)

• ternary-operator

• 1 @VenomFangs you may change your functions to return a constant value always, and assign this return value to a dummy variable. But it's not worth the hassle - code will look stupid, I'm afraid. Better to do it as you already know you should do. –  Igwe Kalu Commented Apr 12, 2013 at 17:15

4 Answers 4

Nope you cannot do that. The spec says so .

The conditional operator has three operand expressions. ? appears between the first and second expressions, and : appears between the second and third expressions. The first expression must be of type boolean or Boolean, or a compile-time error occurs. It is a compile-time error for either the second or the third operand expression to be an invocation of a void method.

Since you asked about reflection, here's a solution. I'm not recommending this. I'm posting it only because you asked.

At the end of the day you've got to ask yourself if being succint improves your code's readability (think for-each loop). None of these solutions improve the code's readability IMHO. If I were you I'd rather go with this.

I'm actually for including braces even when loops only contain a single line, but since you're going after crisp code, the snippet above should do.

• Any thoughts on the reflection comment in: stackoverflow.com/questions/4830843/… –  James Oravec Commented Apr 12, 2013 at 17:11
• Is there a way to make the void reflect to null then assign null to an object? –  James Oravec Commented Apr 12, 2013 at 17:12
• 2 Edited my answer with a reflective solution. For academic purposes of course :) –  Deepak Bala Commented Apr 12, 2013 at 17:25
• Answers the question I asked, so I'll accept the answer... My actual code will look more like that of inline if/then/else that TGMCians showed. :) –  James Oravec Commented Apr 12, 2013 at 18:03
• This has been long answered but I had an idea. (NB: I'm no pro). What if he had those void functions return an integer instead. Say - 1. Then he runs int fake = bool ? method1 : method2; they both return - 1 but the required code still runs. I use this and haven't run into any trouble yet. –  kbluue Commented Dec 20, 2016 at 2:18

No, you can't do this like this.

You can prefer this style if do not like make it more statements.

In ternary operator, Operands are required to be non-void expressions; i.e. they must produce some actual value.

• I like this presentation... I'll accept this answer if no one else can show me a way to do it. E.g. By the reflection of void to null... etc. –  James Oravec Commented Apr 12, 2013 at 17:13

Is there a way to do a java ternary operation without doing an assignment or way to fake the assignment?

OK, so when you write a statement like this:

there are two distinct problems with the code:

The 2nd and 3rd operands of a conditional expression 1 cannot be calls to void methods. Reference: JLS 15.25 .

An expression is not a statement, unless it is either and assignment expression OR a method call OR a object creation. Reference: JLS 14.8 .

In fact, the second of these problems is a syntax error and I would expect any mainstream Java compilers to report it instead of the first problem. The first problem would only reveal itself if you did something like this:

where gobble is a method that does nothing ... except "consume" the value of its argument.

AFAIK, there is no context in which the original expression is acceptable.

However, there are ways to wrap the void functions so that they can be called in a conditional expression. Here is one:

1 - "Conditional expression" is the primary term used for this construct in the Java Language Specification. It is called the "ternary conditional operator" in Oracle Java Tutorial.

If you really-really want to use ternany operation, then there is one hack. BUT this is very bad code, intended only for showing abilities of language. I would never recommend to put this code in production or even show to your friends.

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged java ternary-operator ternary or ask your own question .

• Featured on Meta
• We've made changes to our Terms of Service & Privacy Policy - July 2024
• Bringing clarity to status tag usage on meta sites
• Feedback requested: How do you use tag hover descriptions for curating and do...

Hot Network Questions

• Implications of the statement: "Note that it is very difficult to remove Rosetta 2 once it is installed"
• Stargate "instructional" videos
• What is the origin and meaning of the phrase “wear the brown helmet”?
• How can I cover all my skin (face+neck+body) while swimming outside (sea or outdoor pool) to avoid UV radiations?
• Can I use "Member, IEEE" as my affiliation for publishing papers?
• Very old fantasy adventure movie where the princess is captured by evil, for evil, and turned evil
• Genus 0 curves on surfaces and the abc conjecture
• Physical basis of "forced harmonics" on a violin
• What makes a new chain jump other than a worn cassette?
• Can I travel with regional trains from operators other than DB if I can "use any train" due to a schedule change?
• Short story or novella where a man's wife dies and is brought back to life. The process is called rekindling. Rekindled people are very different
• Is there a law against biohacking your pet?
• Why in QM the solution to Laguerre equations are ONLY Laguerre polynomials?
• Fourth order BVP partial differential equation
• Does H3PO exist?
• How did Jason Bourne know the garbage man isn't CIA?
• General Formula For Hadamard Gate on Superposition State
• chess game: loading images for the rooks
• Pollard's rho algorithm implementation
• Unexpected behaviour during implicit conversion in C
• Finite loop runs infinitely
• Function to find the most common numeric ordered pairings (value, count)
• Uneven Spacing with Consecutive Math Environments
• Making a bracha mentally in case of doubt