Apa itu ternary di javascript?

❮ Previous Next ❯

Ternary Operator

The ternary operator is a simplified conditional operator like if / else.

Syntax: condition ? <expression if true> : <expression if false>

Here is an example using if / else:

Before:

if (authenticated) {
  renderApp();
} else {
  renderLogin();
}

Try it Yourself »

Here is the same example using a ternary operator:

With Ternary

authenticated ? renderApp() : renderLogin();

Try it Yourself »

Test Yourself With Exercises

Exercise:

Complete this ternary operator statement.

blue  renderBlue()  renderRed();

Start the Exercise

❮ Previous Next ❯

Educative Answers Team

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

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

Syntax

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

Example

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

var grade;
var marks = 43;

if (marks < 30) {
  grade = 'Fail';
}
else {
  grade = 'Pass';
}

console.log(grade)

Multiple Ternary operators

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

var grade;
var marks = 68;

if (marks < 30) {
  grade = 'Fail';
}
else if (marks < 60) {
  grade = 'Pass'
}
else if (marks < 90) {
  grade = 'Distinction'
}
else {
  grade = 'High Distinction';
}

console.log(grade)

Multiple Operations

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

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

console.log(grade)

RELATED TAGS

ternary

javascript

operator

Copyright ©2022 Educative, Inc. All rights reserved

One of the first things you are taught when learning to program is how to handle conditional logic with if/else statements. These if/else statements are one of the most common pieces of code you write when programming, and because of that a shorthand version of the if/else statement was created called the ternary operator. In this article I will briefly explain what the ternary operator is and how you can properly use it.

If you prefer to learn visually, check out the video version of this article.

What Is The Ternary Operator?

You may be looking at the name ternary and wondering what the heck that means. I have to agree that the name ternary operator is a pretty poor name, but the reason for this name is because ternary means "composed of three parts" and the ternary operator is the only operator in JavaScript that has three parts to it. Let's take a quick look at the definition of the ternary operator to understand it in more depth.

As you can see the ternary operator is composed of three distinct parts. The condition, trueResult, and falseResult. Let's break down each part.

The condition is the first portion of the ternary operator and is simply an expression that evaluates to true or false. For example person1.name === person2.name, or number > 0. This is essentially equivalent to the portion inside the parenthesis of an if statement. if (number > 0). After the condition, a question mark is used to separate the condition from the trueResult.

The trueResult is the code you want to return from the ternary operator when the condition is true. This is essentially the same as the code inside an if statement. After the trueResult, a colon is used to separate the trueResult from the falseResult.

Finally, the falseResult is the code that is returned if the condition is false. This is the same as the code inside the else portion of an if/else statement.

By combining that all together we can write the following if/else statement as a ternary.

By using the ternary operator we are able to write significantly shorter code without sacrificing readability of the overall code. This is an example of a good way to use the ternary operator. Pretty much anytime that you want to return either one value or another based on a true/false statement a ternary is a great choice. Unfortunately, many people use ternaries for much more than just this simple use case.

Ternary Operator Common Mistakes

One of the biggest mistakes I see developers make with the ternary operator is using it in place of an if/else statement when they do not want to return any results. For example, take the following if/else statement.

This code is not setting a variable or returning anything from the if/else. This code is purely for determining the flow of the program which means you should not use a ternary operator for this code. If you did use a ternary it would look like this.

While this code may look fine, it is unnecessarily convoluted and makes understanding the flow of the program more difficult than a traditional if/else. I like to generally use the simple rule that you should only use a ternary if the trueResult and falseResult are simple values or properties that do not determine the flow of the program. I also follow the rule that ternaries should never be used unless they are setting a value of a variable or being used as the return for a function. This helps to limit the complexity of the code.

Another rule I follow related to ternaries is that I never nest ternaries inside one another. Since ternaries can only execute if/else statements with no if else portion many developers resort to nesting ternaries to emulate the same behavior. Here is a quick example.

As you can see we wrapped a second ternary in parenthesis as the falseResult of the first ternary. This allows us to emulate if else in a ternary, but this code is very difficult to read. Whenever I run into code like this it forces me to take time to parse the code and try to understand exactly how things work which is a large waste of time and very susceptible to me misunderstanding the nested ternaries.

Conclusion

Ternary operator is a unique operator in JavaScript that allows you to drastically shorten if/else statements. This is great for setting variables based on a simple if/else condition, but can be easily misused, leading to difficult to maintain and understand code. Because of this you should be extra cautious when using ternaries to ensure they are making the code easier to understand and not just saving you a few lines of code.

Apa itu ternary Javascript?

Apa yang anda ketahui tentang operator ternary jelaskan beserta bentuk umumnya?