[BUG][ESLINT] Prefer-nullish-coalescing

by ADMIN 40 views

[BUG][ESLINT] prefer-nullish-coalescing

The @typescript-eslint/prefer-nullish-coalescing rule in ESLint incorrectly flags logical OR (||) operators when they are intentionally used to check for truthiness rather than just nullish values. This can lead to false positives and incorrect auto-fix suggestions. In many cases throughout our codebase, we specifically need the logical OR behavior (checking for all falsy values) rather than nullish coalescing (checking only for null/undefined).

The following code examples demonstrate the issue:

// Example 1: Using logical OR for conditional rendering
{(isMatchMember || isTournamentAdmin) && <MatchLobbyIconButton />}

// Example 2: Using logical OR for default values when falsy values should trigger the default
const displayName = username || 'Anonymous';

// Example 3: Boolean logic operations
const canEdit = isOwner || hasEditPermission;

In these examples, the logical OR operators are used to check for truthiness, which is the intended behavior. However, the prefer-nullish-coalescing rule incorrectly flags these operators as potential issues.

If the prefer-nullish-coalescing rule is enabled, it will suggest the following auto-fixes:

// Example 1: Incorrectly changed to nullish coalescing
{(isMatchMember ?? isTournamentAdmin) && <MatchLobbyIconButton />}

// Example 2: Would not trigger default for empty strings
const displayName = username ?? 'Anonymous';

// Example 3: Different logical behavior
const canEdit = isOwner ?? hasEditPermission;

As you can see, the auto-fixes incorrectly change the logical OR operators to nullish coalescing operators, which is not the intended behavior.

The desired auto-fix output is for the code to remain unchanged, as the logical OR operators are the correct operators to use in these cases:

// Example 1: Using logical OR for conditional rendering
{(isMatchMember || isTournamentAdmin) && <MatchLobbyIconButton />}

// Example 2: Using logical OR for default values when falsy values should trigger the default
const displayName = username || 'Anonymous';

// Example 3: Boolean logic operations
const canEdit = isOwner || hasEditPermission;

This is a false positive because:

  1. Logical OR (||) and nullish coalescing (??) serve different purposes: Logical OR checks for truthiness (false, 0, '', null, undefined, NaN are all falsy), while nullish coalescing only checks for null/undefined.
  2. Logical OR checks for truthiness: In many cases, we specifically want to treat all falsy values (not just null/undefined) as triggering the alternate value.
  3. The operation is used for boolean logic where we need truthiness evaluation: In boolean logic operations, we need to evaluate the truthiness of the values, not just check for null/undefined.
  4. Default values should be used for any falsy input, not just null/: In cases where we want to provide a default value when the input is falsy, we should use logical OR, not nullish coalescing.

The @typescript-eslint/prefer-nullish-coalescing rule should not flag logical OR operators as potential issues when they are used to check for truthiness rather than just nullish values. The rule should be updated to take into account the different purposes of logical OR and nullish coalescing, and to provide more accurate auto-fix suggestions.
Q&A: Understanding the [BUG][ESLINT] prefer-nullish-coalescing Issue

A: The @typescript-eslint/prefer-nullish-coalescing rule in ESLint is designed to enforce the use of nullish coalescing (??) operators instead of logical OR (||) operators when checking for null or undefined values.

A: The rule is flagging your logical OR operators as issues because it is incorrectly assuming that you are using them to check for null or undefined values. However, in many cases, logical OR operators are used to check for truthiness, not just null or undefined values.

A: Logical OR (||) checks for truthiness (false, 0, '', null, undefined, NaN are all falsy), while nullish coalescing (??) only checks for null or undefined values.

A: You should use nullish coalescing instead of logical OR when you specifically want to check for null or undefined values. However, if you need to check for truthiness, logical OR is the correct operator to use.

A: To fix the issues flagged by the prefer-nullish-coalescing rule, you can either:

  • Replace the logical OR operators with nullish coalescing operators, if you specifically want to check for null or undefined values.
  • Disable the prefer-nullish-coalescing rule, if you need to use logical OR operators for truthiness checks.

A: You should use logical OR instead of nullish coalescing in the following cases:

  • When checking for truthiness, not just null or undefined values.
  • When using default values for any falsy input, not just null or undefined.
  • When performing boolean logic operations, where truthiness evaluation is required.

A: You can configure the prefer-nullish-coalescing rule to ignore certain cases by adding exceptions to the rule configuration. For example, you can add an exception to ignore cases where the expression is used in a boolean context (e.g., with &&, in if statements).

A: Some best practices for using nullish coalescing and logical OR operators include:

  • Using nullish coalescing when specifically checking for null or undefined values.
  • Using logical OR when checking for truthiness or performing boolean logic operations.
  • Avoiding the use of nullish coalescing in cases where truthiness evaluation is required.
  • Using default values for any falsy, not just null or undefined.