Reducing Code Length with the Ternary Operator in JavaScript

The ternary operator is a concise way to write simple if-else statements in JavaScript. It is also known as the conditional operator because it is based on a condition that determines which value should be returned. Using the ternary operator can help you write less code and make your code more readable. In this tutorial, we will discuss how to use the ternary operator and provide examples to demonstrate its usage.

Syntax:

The syntax of the ternary operator is as follows:

condition ? value1 : value2

If the condition evaluates to true, value1 is returned. If the condition evaluates to false, value2 is returned.

Using the Ternary Operator:

To use the ternary operator, you need to provide a condition that evaluates to either true or false. You then provide two values separated by a colon – the first value is returned if the condition is true, and the second value is returned if the condition is false.

Let’s take a look at an example. Suppose we want to check if a number is even or odd and output a message accordingly:

const num = 5;
const message = num % 2 === 0 ? 'Even' : 'Odd';
console.log(message); // Output: Odd

In this example, the condition num % 2 === 0 checks if num is even. If the condition is true, the value ‘Even’ is returned; if the condition is false, the value ‘Odd’ is returned.

Nested Ternary Operators:

You can also nest ternary operators to create more complex conditions. However, nesting ternary operators can make your code less readable, so use it judiciously. Let’s see an example of nested ternary operators:

const num = 10;
const message = num > 0 ? 'Positive' : (num < 0 ? 'Negative' : 'Zero');
console.log(message); // Output: Positive

In this example, the first ternary operator checks if num is greater than 0. If it is true, ‘Positive’ is returned. If it is false, the second ternary operator is evaluated to check if num is less than 0. If it is true, ‘Negative’ is returned. If both conditions are false, ‘Zero’ is returned.

Using the Ternary Operator in Function:

You can also use the ternary operator within a function to return a value based on a condition. Let’s see an example:

function isAdult(age) {
    return age >= 18 ? 'Adult' : 'Minor';
}

console.log(isAdult(20)); // Output: Adult
console.log(isAdult(15)); // Output: Minor

In this example, the isAdult function uses the ternary operator to return either ‘Adult’ or ‘Minor’ based on the age provided.

Conclusion:

In this tutorial, we have learned how to use the ternary operator in JavaScript to write less code and make our code more concise. By using the ternary operator, you can simplify if-else statements and make your code more readable. Remember to use the ternary operator wisely and avoid excessive nesting to maintain code clarity. Practice using the ternary operator in your code to become more familiar with its usage.