Javascript zero to hero #33 The ternary operator (test ? 1 : 2 )

JavaScript is a powerful and effective programming language that gives programmers many options for creating code that is clear and effective. The ternary operator is one of these options. Developers can create short pieces of code by using the ternary operator, which is a condensed version of an if-else statement.

We will examine the ternary operator’s definition, operation, and applications in this article. We’ll also give some examples to show how it can be applied in real-world situations.

What is the Ternary Operator?

The ternary operator is a shorthand version of an if-else statement. It is a conditional operator that takes three operands: a condition, a value to be returned if the condition is true, and a value to be returned if the condition is false.

The ternary operator is written using the following syntax:

condition ? valueIfTrue : valueIfFalse

The condition is evaluated first, and if it is true, the valueIfTrue is returned. Otherwise, the valueIfFalse is returned.

The ternary operator can be used as a standalone statement or as part of an expression. It is often used in situations where an if-else statement would be too verbose.

How does the Ternary Operator work?

The ternary operator works by evaluating a condition and returning one of two values based on whether the condition is true or false. Here is a basic example:

let age = 18;
let isAdult = age >= 18 ? true : false;

In this example, the condition is age >= 18, which is true because the value of age is 18. Therefore, the ternary operator returns true, and the variable isAdult is assigned the value true.

If the condition had been false, the ternary operator would have returned the value false, and the variable isAdult would have been assigned the value false.

Why is the Ternary Operator useful?

Developers can write clear and concise code thanks to the ternary operator. When the conditions are straightforward and an if-else statement would result in too much verbose code, it can be used to replace those statements.

The result value may need to be assigned to a variable or used as part of an expression, in which case the ternary operator is helpful. The ternary operator can be incorporated into expressions because it returns a value, which results in shorter code.

Examples of the Ternary Operator in Practice

Here are some examples of how the ternary operator can be used in practice:

Example 1: Checking for null values

let name = null;
let greeting = "Hello " + (name ? name : "stranger") + "!";
console.log(greeting); // "Hello stranger!"

In this example, the ternary operator is used to check if the name variable is null. If it is null, the ternary operator returns the string "stranger". Otherwise, it returns the value of name. The resulting string is then used to create a greeting.

Example 2: Toggling a boolean value

let isToggled = true;
isToggled = isToggled ? false : true;
console.log(isToggled); // false

In this example, the ternary operator is used to toggle the value of the isToggled variable. If the value is true, the ternary operator returns false. Otherwise, it returns true. The resulting value is then assigned to the isToggled variable.

Example 3: Returning a function value

function getGreeting(time) {
  return time >= 12 ? "Good afternoon" : "Good morning";
}

console.log(getGreeting(15)); // "Good afternoon"
console.log(getGreeting(9)); // "Good morning"

The getGreeting() function in this example uses the time parameter to determine whether it is before or after noon and then returns a greeting accordingly. Time >= 12 is evaluated using the ternary operator, which will either return “Good afternoon” or “Good morning” depending on the outcome of the evaluation. The function then returns the resultant value.

And that`s it. Have fun using the ternary operator with your newly gained knowledge. Adios 👋