JavaScript One-Liner If-Else Statements

By /

In JavaScript, you can have if-else statements on one line. To write an if-else statement on one line, follow the ternary conditional operator syntax:

condition ? true_expression : false_expression

For example:

const age = 20;

const age_group = age < 18 ? "Child" : "Adult";

This is a useful way to compress short and simple if-else statements. It makes the code shorter but preserves the readability.

However, do not overuse the ternary operator. Converting long if-else statements into one-liners makes your code verbose.

The Ternary Operator – One Line If-Else Statements in JavaScript

Writing a one-line if-else statement in JavaScript is possible by using the ternary operator.

Here is the syntax of the one-liner ternary operator:

condition ? true_expression : false_expression

For instance, let’s say you have an if-else statement that checks if a person is an adult based on their age:

const age = 20;

if(age < 18){
    console.log("Child");
} else {
    console.log("Adult");
}

Running this code prints “Adult” into the console.

Adult

This code works fine. But you can make it shorter by using the ternary operator.

For example:

console.log(age < 18 ? "Child" : "Adult");

Output:

Adult

This way you were able to save 4 lines of code. And the code is still readable and clear.

Nested One-Line If…Else…Else If Statements in JavaScript

Trying to express everything in one line is no good. The ternary operator should only be used when the code can be made shorter but the readability remains.

However, JavaScript allows you to construct nested ternary operators to replace if…else…else if statements.

condition1 ? true_expression1 : condition2 ? true_expression2 : else_expression2

This corresponds to:

if(condition1){
    true_expression1;
} else if(condition2) {
    true_expression2;
} else {
    else_expression2;
}

For instance, you can convert an if…else…else if statement like this:

const age = 17;

if(age < 17){
    console.log("You cannot drive.");
} else if( age == 17 ){
    console.log("Go to driving school.");
} else {
    console.log("You can drive");
}

To an expression like this using the nested ternary operator:

console.log(age < 17 ? "You cannot drive." : ( age == 17 ? "Go to driving school." : "You can drive."));

However, you already see why this is a bad idea. The nested ternary operator only makes the code hard to read in this example. Using the ternary operator this way is ineffective.

In this situation, you have two options:

  1. Use a regular if…else…else if statement instead of a nested ternary operator. That is still perfectly valid JavaScript code!
  2. Break the nested ternary operator into multiple lines.

Let’s next understand how the latter option works.

Multi-Line Ternary Operator in JavaScript

Your motive to use the ternary operator is probably to express if-else statements as one-liners. But it is good to know you can break a ternary operator into multiple lines too.

As you already saw, the one-liner ternary operator syntax in JavaScript is:

condition ? true_expression : false_expression

But you can break this expression into multiple lines this way:

condition
    ? true_expression
    : false_expression

Breaking the expression to multiple lines works with nested ternary operators too.

Generally, this type of nested ternary expression:

condition1 ? true_expression1 : condition2 ? true_expression2 : else_expression2

Becomes a multi-line ternary expression:

condition1
    ? true_expression1
    : condition2
        ? true_expression2
        : else_expression2

Let’s see a concrete example of this by going back to the example of checking the age of a person:

const age = 17;

console.log(age < 17 ? "You cannot drive." : ( age == 17 ? "Go to driving school." : "You can drive."));

This ternary expression is rather verbose. Assuming you do not want to put it back to a regular if…else…else if statement, you can break it down to multiple lines:

const age = 17;

console.log(
    age < 17 
        ? "You cannot drive."
        : age == 17
            ? "Go to driving school." 
            : "You can drive."
);

However, it is up to debate whether this makes the code any better than the original if…else…else if statement. Anyway, now you know it is possible.

Be Careful with the Ternary Operator

Your goal is to always write readable and concise code.

Even though the ternary operator is a built-in mechanism, you can treat it as a “trick in a book”.

If you want, you may use the ternary operator to replace basic if…else statements with one-liners. However, avoid increasing the code complexity by replacing longer if…else…else if statements with one-liners. It is more than fine to use regular if…else statements in your code!

If you still want to use a lengthy ternary operator, please make sure to at least break it down into multiple lines.

Conclusion

In JavaScript, you can turn your if-else statements into one-liners using the ternary operator. The ternary operator follows this syntax:

condition ? true_expression : false_expression

For instance:

const age = 20;

const age_group = age < 18 ? "Child" : "Adult";

JavaScript also supports nested ternary operators for if…else…else if statements. This way you can have as long chains of ternary operators as you like.

condition1 ? true_expression1 : condition2 ? true_expression2 : else_expression2

Usually, a nested ternary operator causes a long one-liner expression. To avoid this, you can break the ternary operator down into multiple lines:

condition1
    ? true_expression1
    : condition2
        ? true_expression2
        : else_expression2

Keep in mind that using a one-liner if-else statement makes sense if it improves the code quality! Applying it on a complex if…else statement does not make sense as it decreases the code quality.

Here is a “good” example of a rather bad usage of the ternary operator:

const age = 17;

console.log(age < 17 ? "You cannot drive." : ( age == 17 ? "Go to driving school." : "You can drive."));

Thanks for reading. Happy coding!

Scroll to Top