Ternary Operator: JavaScript If-Else Shorthand

In JavaScript, the if-else statement is a common control flow construct that allows us to execute different code blocks based on a given condition. In this article, we will explore a shorthand syntax for the if-else statement that can make our code more concise and easier to read.

The If-Else Statement

The if-else statement is used to execute a block of code if a specified condition evaluates to true, and a different block of code if the condition evaluates to false. The basic syntax for the if-else statement looks like this:

if (condition) {
  // Code to execute if condition is true
} else {
  // Code to execute if condition is false
}
Code language: JavaScript (javascript)

In this syntax, the condition is an expression that is evaluated to determine whether the code in the if block or the else block should be executed.

For example, we could use an if-else statement to check if a number is positive or negative, and print a corresponding message:

const number = -5;

if (number >= 0) {
  console.log(`${number} is positive`);
} else {
  console.log(`${number} is negative`);
}
Code language: JavaScript (javascript)

In this code, the if block is executed because the number variable is negative. The output of this code would be:

-5 is negative

The Shorthand Syntax

In JavaScript, we can use a shorthand syntax for the if-else statement that allows us to combine the if and else blocks into a single line of code. This shorthand syntax uses the ternary operator (?) to conditionally assign a value to a variable based on a given condition.

Here is an example of the shorthand if-else syntax:

const number = -5;

const message = (number >= 0) ? `${number} is positive` : `${number} is negative`;

console.log(message);
Code language: JavaScript (javascript)

In this code, the message variable is assigned the value of the expression on the right of the ? operator if the condition on the left of the ? operator evaluates to true. If the condition evaluates to false, the message variable is assigned the value of the expression after the : operator.

This shorthand syntax is equivalent to the longer if-else syntax we saw earlier, but it is more concise and easier to read. The output of this code would be the same as the previous example:

-5 is negative

Conclusion

In this article, we learned about the shorthand syntax for the if-else statement in JavaScript. This syntax allows us to conditonally assign a value to a variable using the ternary operator, which can make our code more concise and easier to read. By using the shorthand if-else syntax, we can write more elegant and efficient code in our JavaScript programs.