What is the Ternary Operator?

The ternary operator is a way to write a simple if-else statement that returns a result but using a shorthand rather than having to write the entire if-else statement. The ternary operator will make reduce the number of lines of code and, if used appropriately, make code easier to read and understand. This doesn't mean you need to replace all your if statement with complex ternary operators though, only use them where they make sense to be used.

The below code snippet shows one variable called 'exists' which is assigned the value 'true' and another variable 'result'. The 'result' variable is initially assigned the value 'No' and then if the value of 'exists' is true the result variable is assigned a different value of 'Yes'. This is effectively making the result variable equal to 'No' if the exists variable is 'false' or 'Yes' if the exists variable is equal to 'true'.

var exists = true;
var result = 'No';
if(exists){
  result = 'Yes';
}

The below snippet of code shows a function called 'MyFunc' that returns the result 'Yes' or 'No' based on the value of the parameter 'exists'. This is similar to the above code, the return result of the function will be equal to 'Yes' if the 'exists' variable is equal to 'true' or 'No' if the 'exists' variable is equal to 'false'.

function myFunc(exists){
  if(exists){
    return 'Yes';
  }else{
    return 'No';
  }
}

Below is an example of a simple ternary operator. This code works exactly the same as the previous examples. There is one variable called 'exists' that is assigned a value of 'true'. The result variable uses a ternary operator to set the value of the variable to either 'Yes' or 'No' dependent on the value of the 'exists' variable. If the 'exists' value is true then the 'result' value will be assigned the value 'yes' and otherwise it will be assigned the value 'No'. The ternary operator works by first writing the conditional statement, then putting a question mark '?' followed by the true result of the condition, the false result is then put after a colon ':' symbol. This is similar to how an if-else statement is broken into three parts, the condition, the true value and then the false value.

var exists = true;
var result = exists ? 'Yes' : 'No';

The ternary operator can be used on other variable types, not just boolean values. Below is a code snippet using the ternary operator on an object. The condition of the ternary operator, like the condition of an if statement, must result in a boolean value. The below ternary operator uses a condition of comparing the 'age' field of the 'person' object. Also, the condition of the ternary operator can more complicated by using conditional operators.

var person = {name: 'John Smith', age: 42};
var retired = person.age > 65 ? 'Yes' : 'No';

Ternary operators and if statements can be used to change the value or execution of code based on a conditional value. For example, you can change the value of the 'retired' variable based on the age of a person. You could run a different path of code based on the value of a variable. However, if all you want is the boolean result from a condition, such as the 'true' or 'false' value if someone is above a certain age you could just use a condition. Setting a value to the result of a condition will give you the true or false value of the condition and set that value to the variable's value. This is important to keep in mind, as you don't need to write and if-else statement or a ternary operator to set a boolean value based on a condition, you can just use the condition for the assignment of the variable. In the below code snippet the 'retired' variable will have the value false.

var person = {name: 'John Smith', age: 42};
var retired = person.age > 65;

This post was originally published on https://acroynon.com