SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions

訊息

SyntaxError: Unexpected token '??' (V8-based)
SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions (Firefox)
SyntaxError: Unexpected token '??'. Coalescing and logical operators used together in the same expression; parentheses must be used to disambiguate. (Safari)

錯誤型別

哪裡出錯了？

運算子優先順序鏈如下所示

|   >   &&   >   ||   >   =
|   >   ??   >   =

然而，?? 與 &&/|| 之間的優先順序是故意未定義的，因為邏輯運算子的短路行為可能會使表示式的評估反直覺。因此，以下所有組合都是語法錯誤，因為語言不知道如何對運算元進行括號化

a ?? b || c;
a || b ?? c;
a ?? b && c;
a && b ?? c;

相反，透過顯式地將任一側加上括號來明確你的意圖

(a ?? b) || c;
a ?? (b && c);

示例

在遷移使用 || 和 && 來防止 null 或 undefined 的舊程式碼時，你可能經常會部分轉換它

function getId(user, fallback) {
  // Previously: user && user.id || fallback
  return user && user.id ?? fallback; // SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions
}

相反，考慮將 && 括起來

function getId(user, fallback) {
  return (user && user.id) ?? fallback;
}

甚至更好，考慮使用可選鏈（optional chaining）而不是 &&

function getId(user, fallback) {
  return user?.id ?? fallback;
}

另見

• TC39 空值合併提案中關於空值合併優先順序的問題
• 空值合併運算子（??）
• 運算子優先順序