How to use an if shorthand without an else in JavaScript

JavaScript's syntax has improved a lot over the years, leading to safer and more concise code.

One of the things this improved syntax allows for is being able to do an if-else shorthand without the else.

In this post, we'll learn how to use the shorthand if-else syntax in JavaScript.

How to use a ternary operator in JavaScript

To learn how to use this shorthand syntax, we'll first define a normal if-else statement.

JAVASCRIPT
const value = 1;

let result = "";

if (value % 2 === 0) {
    result = "Value is even";
} else {
    result = "Value is odd";
}

console.log(result);

BASH
Value is odd

We can make use of a ternary operator to make this code more concise.

JAVASCRIPT
const value = 1;

let result = value % 2 === 0 ? "Value is even" : "Value is odd";

console.log(result);

BASH
Value is odd

This allows us to write the same code in a more concise way.

However, we are still using an else here, just without the actual else keyword.

There is a way we can write this logic in a way where there is no else at all.

How to use the shorthand if-else syntax in JavaScript

To learn how to use the shorthand if-else without an else, let's first define this the long-form way:

JAVASCRIPT
const value = 1;

if (value) {
    console.log("Value is truthy");
}

BASH
Value is truthy

We could once again use a ternary operator to make this code more concise.

JAVASCRIPT
const value = 1;

value ? console.log("Value is truthy") : null;

BASH
Value is truthy

However, we don't, need to explicitly define the else here, as we can just leave it out entirely by using this in a shorthand way with the && operator.

JAVASCRIPT
const value = 1;

value && console.log("Value is truthy");

BASH
Value is truthy

If the value is truthy, the second part of the expression will be executed, otherwise, it will be skipped.

How to use a nullish default value in JavaScript

Another instance in where you might want to use an if-else shorthand without an else is when you want to use a default value.

For example, let's say you have an object with a property that you want to use, but you want to use a default value if the property is not defined.

JAVASCRIPT
const value = null;

const obj = {
    value: value ? value : 0,
};

console.log(obj);

BASH
{ 
    value: 0
}

This can be made more concise by using the ?? operator.

JAVASCRIPT
const value = null;

const obj = {
    value: value ?? 0,
};

console.log(obj);

BASH
{ 
    value: 0
}

Like before, if the value is truthy, it will use that value, otherwise, it will use the default value, which in this case is 0.

Conclusion

In this post, we learned how to use the shorthand if-else syntax in JavaScript.

We learned how to use a ternary operator to make our code more concise, and we learned how to use the && and ?? operators to make our code even more concise.

We also learned how to use a nullish default value in JavaScript.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share