Javascript Ternary Operator

In this lesson, we’ll dive into a shorter, more concise way of writing if...else statements in JavaScript—the ternary operator. This operator allows you to perform conditional checks in a single line of code, making your programs cleaner and more efficient.

Syntax:

          condition ? expressionIfTrue : expressionIfFalse;
        

Here’s how it works:

• condition: The condition that you want to test.
• If the condition is true, the code following the question mark expressionIfTrue is executed.
• If the condition is false, the code following the colon expressionIfFalse runs.

Let’s look at a simple example of how it works in comparison to the regular if...else statement:

Example 1: Using an if...else statement

          let age = 18;

if (age >= 18) {
	console.log('The condition is true');
} else {
	console.log('The condition is false');
}

// The condition is true
        

Here, we have an if...else statement that checks if age is greater than or equal to 18. If it is, it prints "The condition is true"; otherwise, it prints "The condition is false."

Example 2: Using the Ternary Operator

Now, let’s rewrite the same logic using the ternary operator for a more compact solution:

          let age = 18;
age >= 18 ? console.log('The condition is true') : console.log('The condition is false');

// The condition is true
        

In this example, the ternary operator checks if age is greater than or equal to 18. If true, it prints The condition is true if false it prints The condition is false.

How It Works

We first define the condition we want to test age >= 18. After the question mark ?, we specify the code that will run if the condition is true — console.log('The condition is true') . After the colon :, we define the code that runs if the condition is false — console.log('The condition is false').

Example 3: When the Condition Is False

Let’s see an example where the condition is false:

          let age = 17;
age >= 18 ? console.log('The condition is true') : console.log('The condition is false');

// The condition is false
        

Here, the condition age >= 18 is false because age is 17, so the ternary operator runs the second part console.log('The condition is false').

Storing the Result in a Variable

One of the great things about the ternary operator is that you can store the result of the condition in a variable. This is useful when you want to assign different values to a variable based on a condition. Here’s how you can do that:

          let age = 18;
let result = age >= 18 ? 'Age greater than or equal to 18 years' : 'Age under 18 years';
console.log(result);

// Age greater than or equal to 18 years
        

In this example, the ternary operator checks if age is greater than or equal to 18. If true, it assigns Age greater than or equal to 18 years to the result variable otherwise, it assigns Age under 18 years.

Nested Ternary Operators

You can also use nested ternary operators to check more than one condition. This allows you to evaluate multiple conditions in a single line. Here's an example:

          let age = 18;
age == 18 ? console.log(18)
: age > 20 && age < 60 ? console.log('20 To 60')
: age > 60 ? console.log('Age greater than 60')
: console.log('Unknown');


// 18
        

In this case, we check multiple conditions:

• First, if age == 18, it logs 18.
• If not, it checks if age is between 20 and 60, and logs 20 To 60.
• If neither of those conditions is true, it checks if age > 60 and logs Age greater than 60.
• Finally, if none of these conditions are met, it logs Unknown.

Why Use the Ternary Operator?

• Concise and Readable: It makes your code shorter and more readable.
• Flexible: You can use it to assign values to variables or make decisions inline.
• Cleaner Code: Especially when you need to make simple conditional checks.

Conclusion

The ternary operator is a powerful tool that can help streamline your code, making conditional checks more concise. While it’s not always suitable for complex logic, it’s a great option when you need a quick, readable solution for simple conditions. Keep experimenting with it, and you’ll see how useful it can be!