Clean One-Line JavaScript Conditionals

Writing shorter conditionals in JavaScript, when appropriate, can help keep our code concise yet clean.

I will demonstrate three different shorthand JavaScript conditionals:

1. Condensed if...else block

2. One-line ternary expression

3. One-line binary expression

Condensed if…else block

Here’s a standard if...else block in JavaScript:

let condition = true;

if (condition === true) {
    console.log(`Condition is true.`);
}

And here’s one way it can be shortened into a single line:

if (contion === true) console.log(`Condition is true.`);

It’s worth mentioning this method also works for else if and else conditions like this one:

if (condition === true) {
    console.log(`Condition is true.`);
} else if (condition === false) {
    console.log(`Condition is false.`);
} else {
    console.log(`Condition is: ${condition}.`);
}

Just place each condition on its one line:

if (condition === true) console.log(`Condition is true.`);
else if (condition === false) console.log(`Condition is false.`);
else console.log(`Condition is: ${condition}.`);

However, there is a caveat to this approach.

Consider the following code:

// The following code will NOT work as intended:
const someFunction = () => if (condition === true) console.log(`Condition is true.`);

It won’t work. If you’re going to use this type of one-line conditional as the body of an ES6 arrow function, then you’ll need to enclose it in brackets:

// The following code WILL work as intended:
const someFunction = () => {
    if (condition === true) console.log(`Condition is true.`);
};

One-line ternary expression

JavaScript’s ternary expression is a much more versatile one-line conditional. However, it only supports if and else conditions (but not else if conditions).

Here’s a typical block of code using an if and else condition:

let bool = true;

if (bool === true) {
    console.log(`true`);
} else {
    console.log(`false`);
}

Here’s an example of shortening that block using a ternary expression:

bool === true ? console.log(`true`) : console.log(`false`);

A ternary expression contains two special symbols, “?” and “:”.

These two special symbols separate the expression into three parts:

1. The code before the ? is the condition.

2. The code between the ? and : is the expression to evaluate if the condition is truthy.

3. The code after the : is the expression to evaluate if the condition is falsy.

Ternary expressions can be used in variable assignments:

// If "bool" is true, then "result" is true. Otherwise, it is false:
let result = bool === true ? true : false;

And they can also be interlopated within strings:

// If "name" isn't null, print it. Otherwise, print "world":
console.log(`Hello ` + (name ? name : `world`));

One-line binary expression

Now this is the one that I’ve found especially useful.

The binary expression only supports if conditions, but neither else if nor else conditions.

Here’s a typical if condition:

let sky = `blue`;

if (sky === `blue`) {
    console.log(`The sky is blue.`);
}

And here’s how we can use one of JavaScript’s binary expressions to shorten it:

sky === `blue` && (console.log(`The sky is blue.`));

This binary expression is separated by the “&&” binary operator into two parts:

1. The code before the && is the condition.

2. The code after the && is the expression to evaluate if the condition is truthy.

Conclusion

You made it to the end!

I hope you find at least one of these shortened conditionals useful for cleaning and shortening your code.

Personally, I use them all the time.