🈚️
【JavaScript】null 合体演算子についてまとめてみた
JavaScript の null 合体演算子について
前回は様々な演算子の中で三項演算子を取り上げましたが、今回は null 合体演算子 についてまとめてみたいと思います。
null 合体演算子とは
??
の 左側の値が null
または undefined
のときに、右側の値を返す 演算子です。
(もし null と undefined が分からない場合は参考記事をご覧ください。参考記事:JavaScript での undefined と null の違い)
構文
値1 ?? 値2;
値1
が null
または undefined
の場合に 値2
を返します。
シンプルな例
const name = null;
const displayName = name ?? "Zenn";
console.log(displayName); // "Zenn"
この場合、name
は null
なので、右側の "Zenn"
が返されます。
||
との違い
注意:論理和||
は Falsy な値 (0
, ''
, false
など) も「偽」とみなすため、意図しない動作になることがあります。一方で ??
は null または undefined の場合のみ 右側の値を返します。
(論理和||と論理積&&については後で記事を書こうと思います。)
実用例
API レスポンスの処理
const apiResponse = {
items: undefined,
};
const items = apiResponse.items ?? [];
console.log(items); // [] (空の配列)
API からのデータが undefined
でも、空の配列 []
を設定することでエラーを防げます。
まとめ
null 合体演算子??
は null
または undefined
の場合のみ 右側の値を返します。
設定値のデフォルト処理や、API レスポンスの処理などでnull
やundefined
が発生する可能性がある際に使うと、エラーを回避できるので有効です。
Discussion