Nullish coalescing operator の優先順位は低いため計算に使うときなどは注意が必要

JavaScript の nullish coalescing operator (??) の優先順位は低いため、計算とあわせて使うときに意図せぬ結果になることがある。ちなみに、operator の優先順位は Operator precedence - JavaScript | MDN で確認できる。

例えば、次のコードでは、user.age が設定されていない場合のデフォルト値として 18 を設定しているつもりだが、 2 + user.age が優先されて NaN になる。

const user = {
  id: 1
}
 
const result = 2 + user.age ?? 18;
console.log(result); // NaN

意図した通りの結果を得るためには、次のように grouping operator () を使う。

const user = {
  id: 1
}
 
const result = 2 + (user.age ?? 18);
console.log(result); // 20

参考

• Operator precedence - JavaScript | MDN
• Nullish coalescing operator (??) - JavaScript | MDN
• Grouping operator ( ) - JavaScript | MDN