【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が発生する可能性がある際に使うと、エラーを回避できるので有効です。