Choosing Between || and ?? to Communicate Code Intent

I want to verbalize my thought process when choosing between || and ??.

I feel like what I want to say is slightly different... I want to say that unlike ||, ?? is more convenient when considering compatibility with the type system, or something like that (I haven't quite verbalized it yet).

The Difference Between || and ??

For more details, please refer to the following.

• Logical OR (||) - JavaScript | MDN

• Nullish coalescing operator (??) - JavaScript | MDN

When to Use ||

|| is used when you want to adopt the right-hand value if the left-hand side is a falsy value.

For example, the following outputs the string (please input) if the input value is a falsy value, including an empty string.

const input: string = inputSomething() // Get some input

console.log(`Your name: ${input || '(please input)'}`)
// => "Your name: (please input)"

When to Use ??

?? is used when you want to adopt the right-hand value if the left-hand side is null or undefined.

For example, the following outputs '' (an empty string) if the input value is a nullish value such as null or undefined.

const input: string | null | undefined = getName() // Retrieve from DB, API, etc.

console.log(`Your name: ${input ?? ''}`)
// => "Your name: "

🤔 Doesn't it matter if the result is the same?

I feel like what I want to say is slightly different... I want to say that ?? is superior in terms of compatibility with TypeScript's type system (I haven't quite verbalized it yet).

That's one way to look at it, but from the reader's perspective, even if the result is the same, the intent read from the code is different, so I'd like you to be mindful of which one you use.

For example, let's look at the following code.

const input: string | undefined = getName() // Retrieve from DB, API, etc.

console.log(`Your name: ${input || ''}`)
// => "Your name: "

The execution result of this code is the same as the "When to Use ??" case, but the intent read from the code is different.

When reading this code, one follows a thought process like this:

• The author expects input to be a falsy value and intends to output '' in that case.
• Based on the type definition, the falsy values here are limited to undefined and '' (empty string).
• If '' appears on the left side, it will be replaced by the value '' on the right side.
• However, a contradiction is recognized in the fact that this operation is meaningless ⬅ This is where the intent of the code becomes unclear.
• Consider several possibilities to account for the contradiction in the code:
  • Is the type wrong?
  • Should the right-hand value originally have been something other than ''?

In this way, even if the program's behavior is the same, the intent the code conveys is different.

Personally, when there are cases that make no sense even if the result is the same, the author's intent conveyed through the code feels "blurred" ^[1]

In Conclusion

If the result is the same and the effort required is much the same, I want you to choose the way that conveys the intent to the person reading the code.

That's all for this post.

脚注

1. When reading code, I get this vague feeling that "there's about a 95% probability that this is the intention, but there's about a 5% probability that it might be a different intention."