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

Thông báo

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)

Loại lỗi

Nguyên nhân?

Chuỗi độ ưu tiên toán tử trông như sau:

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

Tuy nhiên, độ ưu tiên giữa ?? và &&/|| được cố ý để không xác định, vì hành vi short-circuit của các toán tử logic có thể khiến việc đánh giá biểu thức trở nên khó hiểu. Do đó, các tổ hợp sau đây đều là lỗi cú pháp, vì ngôn ngữ không biết cách đặt ngoặc đơn cho các toán hạng:

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

Thay vào đó, hãy làm rõ ý định của bạn bằng cách đặt ngoặc đơn một cách tường minh cho một trong hai vế:

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

Ví dụ

Khi di chuyển code cũ sử dụng || và && để kiểm tra giá trị null hoặc undefined, bạn có thể thường xuyên chuyển đổi code một cách không đầy đủ:

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

Thay vào đó, hãy cân nhắc đặt ngoặc đơn cho &&:

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

Tốt hơn nữa, hãy cân nhắc sử dụng optional chaining thay vì &&:

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

Xem thêm

• Issue về độ ưu tiên nullish coalescing trong đề xuất nullish-coalescing của TC39
• Nullish coalescing operator (??)
• Operator precedence