Subscribe

JavaScript if shorthand without the else

✍️

Let's see some variations on writing the JavaScript if else statement without the else part

1 Aug, 2022 · 2 min read

At one point in your career, you'll find yourself using the ternary operator in JavaScript a lot.

It's a fancy word for the if...else shorthand version.

Let's recheck the example.

// Full if else

let result = '';
if (our_value) {
  result = 'we got a value';
} else {
  result = 'no value';
}

// Ternary
result = our_value ? 'we got a value' : 'no value';

So that's already a set working example.

If without the else

However, sometimes we might want to execute or set something if a specific condition is met.

Let's look at the following example.

if (our_value) {
  alert('I have the value');
}

This piece of code should alert the user if the our_value condition is truthy.

There is no else involved.

We could write it like this:

our_value ? alert('I have the value') : null;

However, we don't need the null value as it doesn't do anything, so we can switch to using the && operator.

our_value && alert('I have the value');

Way cleaner, we tell the script if we do have this truthy value, we should alert the user.

Nullish default value

In some cases, you might have a function that returns some value, but you might want to return a default value if the object is nullish.

const name = null;
const user = {
  username: name ? name : 'John Doe',
};

console.log(user);
// { username: 'John Doe' }

That example works perfectly fine. However, it's a bit duplicated again. We can leverage the ?? operator to set a default return value.

This ?? operator is called a logical nullish operator.

const user = {
  username: name ?? 'John Doe',
};

This will either return the value of name, and if that doesn't exist, it will return John Doe.

Note: Be careful when the value can be false as it will return false in that case.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Removing all vowels with JavaScript

3 Dec, 2022 · 2 min read

Removing all vowels with JavaScript

10 games to learn JavaScript

2 Dec, 2022 · 3 min read

10 games to learn JavaScript

Join 1900 devs and subscribe to my newsletter