How to use shorthand for if else statement in JavaScript

Use shorthand for if else statement in JavaScript

Use the conditional ternary operator to use a shorthand for an if else statement. The conditional ternary operator is the only JavaScript operator that takes three operands. The first operand is a condition, the second is an expression to execute if the condition is truthy, and the third is an expression to execute if the condition is falsy.
The syntax for the ternary operator is – condition ? expressionIfTrue : expressionIfFalse

A condition followed by a question mark (?) and expression are separated by (:) colon.

Example –

const theResult = 15 > 10 ? 'yes' : 'no';
console.log(theResult);

const theAnotherResult = 50 > 500 ? 'yes' : 'no';
console.log(theAnotherResult);

If we want to implement same code using if else operator, Let’s have an example –

if (15 > 10) {
  theResult = 'yes';
} else {
  theResult = 'no';
}

The part before the question mark (?) is a condition. If the condition is true, then the statement after the question mark will be executed.
A simple way to think about it is:

• The value before the colon is the condition for your if block.
• The value after the colon is the condition for your else block.

Let’s try a more complex example.

function sumOf(a, b) {
  return a + b;
}

const theResult = sumOf(10, 10) > 1 ? sumOf(5, 5) : sumOf(1, 1);

console.log(theResult);

The return value from a ternary operator can be calculated using expressions.

The condition in this example evaluates to true, so the function on the left side of the colon is executed and its return value is used as the result of the operator.

A common use case for interpolating strings is to use the if else shorthand.

Q. What is string interpolation?

A. String interpolation is a way to insert values into a string. For example, if you have a string that says “Hello, my name is _____”, you can use string interpolation to fill in the blank with your name.

Example –

const color = 'green';

const colorIs = `color is ${color === 'blue' ? 'blue-100' : 'red-100'}`;

console.log(colorIs);

We used a ternary operator in a template literal in this example.

Explanation –
We check if the variable color is equal to blue. If it isn’t, the value after the colon is returned from the ternary operator and interpolated in the string.

ℹ️ We used backticks (``) to wrap the template literal, not single quotes.

The dollar sign and curly braces mark ${} an expression that will be evaluated.

A common use case for a ternary is to check if an array contains at least 1 element.

const result = [].length ? 'contains elements' : 'is empty';

console.log(result);

In this example, the length property of an empty array returns 0, which is a falsy value. Therefore, the value after the colon is returned from the ternary operator.

You might discover operators that have multiple ternary operators nested within them, which can make the code less readable than multiple if else statements.

Let’s see an example of a nested ternary operator –

const result = 1 + 1 === 2 ? (2 > 0 ? 'yes' : 'no') : 'I don't know';

console.log(result); 

If we use an if else statement, the code will look like this:

if (1 + 1 === 2) {
  if (2 > 0) {
    result = 'yes';
  } else {
    result = 'no';
  }
} else {
  result = 'I don't know';
}

In the example, the condition gets evaluated first, and if it’s true, then the part before the colon gets evaluated. If it’s false, then the part after the colon gets evaluated.

The result of the nested ternary is true, so the part before the colon on the nested ternary is returned.

ℹ️ Nesting ternary operators can be more useful in ReactJS applications.