Javascript Ternary Operator

__del__ | code Python module | COM PHP module | Ev PHP module | exp | FFI PHP module | imp Python module | io Python module | JavaScript | Lua PHP module | operator Python module | os Python module | Python functions | re Python module | resource Python module | site Python module | StackOverflow | stat Python module | struct Python module | test Python module | time Python module | UI PHP module

Michael Zippo 04.11.2021

👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!

The ternary JavaScript operator evaluates a statement and returns one of two values. You can ask a ternary operator to return a value if the statement returns true or false. The syntax of the ternary operator is: statement? if_true: if_false;.

There may be times when you want certain code to run only when certain conditions are met.

For example, let’s say you have a date of birth field on your e-commerce site. Also suppose you only allow customers over 18 to buy products from your website. We recommend that you verify that a user is the correct age before using your site.

The potential result is true or false, so we can use a ternary operator to check if a user is the correct age.

In this tutorial, we will see how to use ternary operators. We’ll refer to an example to get you started.

What is a JavaScript ternary operator?

JavaScript ternary operators, called conditional ternary operators, they are similar to the JavaScript if… else instruction. A ternary operator tests if a condition is met and does something depending on whether that condition is met or not.

The ternary expression has the following syntax:

A condition comes first, then a question mark. The first expression will be executed if the condition is met. The second condition will be executed if the condition is not met.

Back to basics: if statements

The conditional operator is a JavaScript based instruction "if" . This statement allows you to execute a block of code if a condition is met. Otherwise, the program executes the contents of a statement "else" .

Here is an example of an if statement. Let’s use the scenario of an ecommerce site checking the age of its users that we talked about earlier.

Our if statement will be executed and user_is_right_age will be set to false. The program first checks if the client’s age is 18. Since the user is no older than 18, the else clause is executed and sets user_is_right_age to false.

Even though this code works, it’s a lot of code ! It takes five lines to verify the age of our client.

What if t I tell you that there is a way to perform the same function in one line of code ? This is where the ternary operator comes in.

Examples of ternary JavaScript operators

We can simplify our previous if statement by using a ternary operator:

This code, when executed, gives the same result as the previous code (false), but in fewer lines. If the conditional was true, if the user’s age was 18 or older, our program would return true.

In the example we used above, our program checks if the user is the correct age. Our code returns false because the user is under 18 and our condition has not been met.

Let’s move on to another example. Let’s say we want to check if a customer on our site is eligible for express delivery. We could do this with a ternary JavaScript operator:

Our ternary operator will check if the user is an express customer and then determine the shipping time for the user. As seen above, our user is an express customer, so the condition is rated as true, they are delivered in 48 hours. If our customer is not an express customer, our code will be wrong. Therefore, the customer will be delivered within 72 hours.

Nested JavaScript ternary operators

A JavaScript ternary operator nested is a ternary in another ternary. These instructions are useful if you want to evaluate several businesses, but they can quickly become difficult to read if you are not careful.

Let’s say we are an e-commerce company that offers three delivery times: standard (72), express (48 hours) and one day (24 hours). How to use a ternary operator in this case, since there are three options ? Should we use an if‚Ķ else statement instead ?

No don’t worry, you can also use a JS ternary operator with three expressions. Here is an example of the previous example in action:

In this case, the delivery time for our client would be 24 hours. This program first checks whether the user is an express customer, which he is not. So, check if these are 24 hour customers, which is true. Therefore, the shippingTimeForCustomer variable is assigned the value 24.

If you were not an express or 24 hour customer, the delivery time would be 72 hours.

Conclusion

The JavaScript ternary operator is an alternative to the if statement when you want to evaluate whether a condition is true or false. You can wrap multiple ternary operators in another operator.

Conditional statements such as the ternary operator only execute certain codes when specific conditions are met. They are a key part of almost all programming languages ‚Äã‚Äãand will appear in almost any JavaScript program you write.

Want to learn more about JavaScript ? We have what you need. We have a complete guide on how to learn JavaScript . In this guide, you will find all the resources you need to further improve your JavaScript skills.