The JavaScript ternary operator is a shorthand syntax for writing if-else statements. It allows you to write a conditional expression in a concise and compact manner.
The syntax of the ternary operator is:
condition ? expressionIfTrue : expressionIfFalse
1. The condition is an expression that evaluates to either true or false. It is typically a comparison or logical operation that determines which expression to evaluate.
2. The question mark (?) acts as a separator between the condition and the expressions. It indicates that a decision needs to be made based on the condition.
3. The expressionIfTrue is the value or expression that is returned if the condition evaluates to true.
4. The colon (:) separates the expressionIfTrue from the expressionIfFalse. It serves as an else statement, indicating what should be returned if the condition evaluates to false.
The ternary operator works by first evaluating the condition. If the condition is true, the expressionIfTrue is executed, and its value is returned. If the condition is false, the expressionIfFalse is executed, and its value is returned.
Example 1:
var age = 20;
var eligibility = age >= 18 ? 'Eligible' : 'Not Eligible';
console.log(eligibility); // Output: Eligible
In this example, the condition `age >= 18` is evaluated. Since `age` is 20 and it is indeed greater than or equal to 18, the expressionIfTrue `'Eligible'` is assigned to the `eligibility` variable. Therefore, the output of `console.log(eligibility)` is `'Eligible'`.
Example 2:
var score = 80;
var grade = (score >= 90) ? 'A' : (score >= 80) ? 'B' : (score >= 70) ? 'C' : 'D';
console.log(grade); // Output: B
In this example, the condition `score >= 90` is first evaluated. Since `score` is 80 and it is not greater than or equal to 90, the first expressionIfFalse `(score >= 80) ? 'B'` is evaluated. This starts another ternary operation, which checks if `score >= 80`. Since it is true, the expressionIfTrue `'B'` is assigned to the `grade` variable. Therefore, the output of `console.log(grade)` is `'B'`.
Example 3:
var isEven = 7 % 2 === 0 ? true : false;
console.log(isEven); // Output: false
In this example, the condition `7 % 2 === 0` is evaluated. The modulo operator `%` returns the remainder of the division of 7 by 2, which is 1. Since 1 is not equal to 0, the expressionIfFalse `false` is assigned to the `isEven` variable. Therefore, the output of `console.log(isEven)` is `false`.
It's important to note that the ternary operator has its limitations. It should be used when the condition and resulting expressions are simple and clear. If the logic becomes complex or includes multiple statements, it's generally better to use if-else statements for improved readability and maintainability.
Also, the ternary operator can also be nested, allowing for more complex conditions. However, it is important to use it sparingly and maintain readability.