🈚️

【JavaScript】null 合体演算子についてまとめてみた

2025/02/02に公開

JavaScript の null 合体演算子について

前回は様々な演算子の中で三項演算子を取り上げましたが、今回は null 合体演算子 についてまとめてみたいと思います。

null 合体演算子とは

?? の 左側の値が null または undefined のときに、右側の値を返す 演算子です。
(もし null と undefined が分からない場合は参考記事をご覧ください。参考記事:JavaScript での undefined と null の違い

構文

1 ??2;

値1null または undefined の場合に 値2 を返します。

シンプルな例

const name = null;
const displayName = name ?? "Zenn";
console.log(displayName); // "Zenn"

この場合、namenull なので、右側の "Zenn" が返されます。

注意:論理和|| との違い

|| は Falsy な値 (0, '', false など) も「偽」とみなすため、意図しない動作になることがあります。一方で ??null または undefined の場合のみ 右側の値を返します。

(論理和||と論理積&&については後で記事を書こうと思います。)

実用例

API レスポンスの処理

const apiResponse = {
  items: undefined,
};

const items = apiResponse.items ?? [];
console.log(items); // [] (空の配列)

API からのデータが undefined でも、空の配列 [] を設定することでエラーを防げます。

まとめ

null 合体演算子??null または undefined の場合のみ 右側の値を返します。
設定値のデフォルト処理や、API レスポンスの処理などでnullundefinedが発生する可能性がある際に使うと、エラーを回避できるので有効です。

GitHubで編集を提案

Discussion