# 9. Ternary Operator The ternary operator, also known as the conditional operator, is a concise way to write conditional statements in JavaScript. It provides a way to evaluate a condition and return one of two values based on whether the condition is true or false. This operator is especially useful for compact and readable code when you need to make simple decisions with two possible outcomes. Here's a more in-depth explanation of the ternary operator, along with examples to illustrate its usage: ### Basic Syntax: The ternary operator has the following syntax: ```javascript condition ? expressionIfTrue : expressionIfFalse ``` - `condition`: This is the expression that is evaluated. If it's true, the value of `expressionIfTrue` is returned; otherwise, the value of `expressionIfFalse` is returned. - `expressionIfTrue`: This is the value that is returned if the `condition` is true. - `expressionIfFalse`: This is the value that is returned if the `condition` is false. ### Example 1: Age Eligibility Suppose you want to check if a person is eligible to vote based on their age. ```javascript let age = 18; let canVote = age >= 18 ? "Yes, you can vote" : "No, you cannot vote"; console.log(canVote); ``` In this example, if the `age` is greater than or equal to 18, it returns "Yes, you can vote." If the condition is false, it returns "No, you cannot vote." ### Example 2: Weather Decision Consider making a decision about whether to bring an umbrella based on the weather. ```javascript let isRaining = true; let weatherAdvice = isRaining ? "Bring an umbrella" : "You don't need an umbrella"; console.log(weatherAdvice); ``` If `isRaining` is true, it advises to "Bring an umbrella." If `isRaining` is false, it suggests "You don't need an umbrella." ### Example 3: Numeric Comparison You can also use the ternary operator to determine the larger of two numbers. ```javascript let num1 = 10; let num2 = 15; let largerNumber = num1 > num2 ? num1 : num2; console.log("The larger number is: " + largerNumber); ``` In this case, it compares `num1` and `num2` and returns the larger number, which is 15. ### Example 4: Display User Role Let's say you want to display a user's role based on their permissions. ```javascript let isAdmin = true; let userRole = isAdmin ? "Admin" : "User"; console.log("User Role: " + userRole); ``` If `isAdmin` is true, it assigns "Admin" as the user role; otherwise, it assigns "User." ### Nested Ternary Operators: You can also nest ternary operators to handle more complex conditions. However, be cautious as nesting can reduce code readability if taken to extremes. Here's a simple example: ```javascript let temperature = 28; let weather = temperature > 30 ? "Hot" : (temperature > 20 ? "Warm" : "Cool"); console.log("The weather is " + weather); ``` In this example, it checks the `temperature` and assigns the appropriate weather description based on the value. ### Benefits and Caveats: - **Benefits:** The ternary operator is concise, making code more compact. It's suitable for simple, binary decisions, enhancing code readability. - **Caveats:** Avoid excessive nesting of ternary operators, as it can lead to code that's hard to read and understand. For more complex conditions or multiple outcomes, consider using `if/else` statements or `switch` statements. The ternary operator is a valuable tool for simplifying simple conditional checks and assignments in your JavaScript code. It can help make your code more efficient and maintainable when used appropriately. ### Example 1 ```js const age = 15; (age >= 18) ? console.log("can vote.") : console.log("cannot vote."); ``` **Output** ``` cannot vote. ``` *** ### Example 2 ```js // ternary operator to check the eligibility to vote const age = 15; const result = (age >= 18) ? " can vote." : "cannot vote."; console.log(result); ``` **Output** ``` cannot vote. ``` *** ### Assignment and Task **Can you create a program to check whether a number is positive or negative?** ### Solution: ```js const number = 10; const result = (number >= 0) ? "The number is positive" : "The number is negative"; console.log(result); ``` **Output** ``` The number is positive ``` *** ### p4n Quiz **Q. What is the correct ternary equivalent of the following if...else statement?** ```js if (5 > 3) { greater = 5; } else { greater = 3; } ``` 1. greater = 5 > 3 ? 3 : 5; 2. 5 > 3 ? greater = 5 : 3; 3. greater = 5 > 3 ? 5 : 3; 4. 5 > 3 ? greater = 3 : 5; Answer: 3