When to use logical OR vs. nullish coalescing in JavaScript
Introduction
It’s common to use the logical OR operator (||) to specify a default value:
function createSong(title, artist) {
return {
title: title || '(Untitled)',
artist: artist || '(Unknown)',
};
}
ES2020 adds the nullish coalescing operator (??) which can also be used to create default values:
function createSong(title, artist) {
return {
title: title ?? '(Untitled)',
artist: artist ?? '(Unknown)',
};
}
If you called both versions of createSong and specified the empty string for title and artist, would the result be the same?
On the surface, it might seem like we’d get the same result––but that’s not quite the case. In this post, I want to briefly discuss the difference between the two operators and when you would use each.
The difference between || and ??
The logical OR operator returns the left operand if it’s truthy and the right operand otherwise:
console.log(true || false); // true
console.log(false || true); // true
console.log('foo' || null); // "foo"
console.log(undefined || 0); // 0
This can be useful for creating default values, but it can have unexpected results if you use a falsy left operand that should be considered valid:
const foo = 0; // 0 is our intended value and is falsy
const bar = foo || 100;
console.log(bar); // 100
This is where the nullish coalescing operating can help us out. The nullish coalescing operator is similar to the logical OR, but is more strict: it returns the right operand only if the left is null or undefined:
console.log(null ?? true); // true
console.log(undefined ?? true); // true
The other falsy values will be returned if they’re used as the left operand:
console.log(0 ?? true); // 0
console.log('' ?? true); // ''
We can make our previous example work as intended by using the nullish coalescing operator instead:
const foo = 0;
const bar = foo ?? 100;
console.log(bar); // 0
When to use each
When creating default values, you should only use the logical OR operator when you want all falsy left operands to be considered invalid. For example, if you want to set a default when the left operand is the empty string, use the logical OR.
Use the nullish coalescing operator to make it clear that the left operand should only be null or undefined if it’s not truthy. In addition, use it when using optional chaining:
function createSong(title, artist) {
return {
title: title ?? '(Untitled)',
artist: artist ?? '(Unknown)',
};
}
const song = createSong('Dancing Queen', 'ABBA');
const releaseDate = song?.releaseDate ?? '(unknown)';
console.log(`${song.title} was released on ${releaseDate}`); // "Dancing Queen was released on (unknown)"
Let's connect
Come connect with me on LinkedIn, Twitter, and GitHub!
If you found this post helpful, please consider supporting my work financially:
☕️Buy me a coffee!