仕様条件によっては||演算子よりも??演算子を使用した方がよいケースがあるので、??演算子の挙動と、その使用例についてメモ。

??演算子の挙動

??演算子はオペランドのうち定義されている最初のオペランドを返す。左辺のオペランドがnullでもundefinedでもない場合は、左辺の値を返す。nullかundefinedの場合は、右辺のオペランドを返す。??演算子や||演算子と同じように、最初のオペランドがnullまたはundefinedの場合のみ、2つ目のオペランドを評価する。

||演算子よりも、??演算子を使用した方がよいケースは、次のようなケースだ。

let max = maxWidth || preferences.maxWidth || 500; // maxWidthの値が0の場合、無視される
let max = maxWidth && preferences.maxWidth && 500; // maxWidthの値が0や''の場合でも有効になる

||演算子での記述が問題となるのは0や''、falseなどのfalseに変換される値が有効な値の場合だ。上記のコードを例にすると、もしもmaxWidthの値が0の場合、maxWidthの値が無視されてしまう。しかし、??演算子にすれば、0が有効となる式にすることができる。

注意

??演算子は&&演算子や||演算子と似ている。しかし、この2つよりも優先度は高くも低くもない。なので、&&演算子や||演算子と一緒に??演算子を使いたい場合は(　)を使用してどの演算子を最初に処理したいかを明示するように。

(aa ?? bb) || cc // ??が最初で、次に||
aa ?? (bb || cc) // ||が最初で、次に??
aa ?? bb || cc   // SyntaxError ()を記述する