null 合体演算子とNull 合体代入について調べたことをメモしました。
なるべく簡潔に記述していこうと思います。

はじめに：nullやundefinedの重要性

nullやundefinedの値は、意図せずに扱うとエラーやバグの原因となるため、挙動をしっかりと理解し適切に処理する必要があります。

予期せぬエラーの発生例

例えば、オブジェクトのプロパティやメソッドにアクセスしようとした際に、そのプロパティがnullまたはundefinedだった場合、TypeErrorが発生し、コードが停止してしまう場合があります。

let user = null;
console.log(user.name);//Type Error

このような予期せぬエラーを防ぐためにも、nullやundefinedにまつわる挙動を理解しておく必要があります。

nullとundefinedの挙動

nullとundefinedは、JavaScriptにおいて値が存在しないことを表す特別な値という点においては同じですが、それぞれ意味や使い方が異なります。

null

開発者が意図的に「空（存在しない）」であることを表すための値。
用途としては、変数やプロパティに「何もない」状態を明示したい時に利用します。

const user = null;//userが存在しないことを明示

undefined

「未定義」を意味し、何も値が割り当てられていない状態のこと。
JavaScriptエンジンが自動的に設定する未定義の状態。
変数に値が入っていない場合や、オブジェクトのプロパティが存在しない場合に自動的に設定される。

const name;
console.log(name);// undefined

Null合体演算子 [??]

Null合体演算子とは、変数に初期値を設定する時に使われる演算子。
左のオペランドがnullまたはundefinedの場合、右のオペランドを（初期値として）返す。

const name = null;
const userName = name ?? "ゲスト";
console.log(userName)// "ゲスト"

値がnullまたはundefinedだった場合にデフォルト値を設定できるため、予期せぬエラーを回避することができる。

左辺がnullとundefined以外（0やfalse）の場合

0や空文字、falseなどの値を比較したときは、そのまま0や空文字、falseが返る。

let result1 = 0 ?? "Default";//0が返る
let result2 = "" ?? "Default";//空文字が返る
let result3 = false ?? "Default";//falseが返る

Null合体演算子を使うメリット

Null合体演算子を使うメリットとして、以下のようなものが挙げられる。

• 簡潔にデフォルト値を設定したい時に便利。
• nullとundefinedを区別できる
• 意図しないデフォルト値の上書きを防止できる

nullとundefinedは、明示的に値が設定されていないことを示す特別な状態として意図的に使われる。
これらは、「値が存在しない/まだ決まっていない」という意味で、0やfalseとは異なる。

そのため、これらのnullとundefinedに対してのみデフォルト値を設定したいというニーズがある。
例えば、ユーザーが入力を行わなかった場合や、何らかの処理が失敗して値が設定されていない場合にデフォルト値を用意でき、かつ、意図的に0やfalseが入力された場合は、それらがデフォルト値で上書きされずに済むというメリットがある。

（nullもしくはundefinedに対してのみ代替値（デフォルト値）を設定するため、0や空文字、falseといったfalsyな値はそのままの値が返る。）

Null合体代入 [??=]（Null合体演算子の自己代入）

左辺がnullまたはundefinedの場合のみ、右辺の値で左辺を更新（代入）する。
左辺がnullまたはundefinedでない場合は、左辺は変更されない。

let a = null;
a ??= "Default";//a は"Default"となる

左辺がnullまたはundefinedの場合のみ、右辺の値で上書きするため、特定の変数にデフォルト値を持たせたい時に役にたつ。

再代入が必要な場合に便利で、変数がすでに値を持っている場合は変更されない。

Null合体代入を使うメリット

簡潔な記述

Null合体代入を使うメリットとして、nullまたはundefinedの場合にデフォルト値を代入するコードを短く記述できる。

//従来の記述
if(foo === null || foo === undefined){
  foo = "default"
}

//Null合体代入
foo ?? "default"

非同期処理の際や、オプショナルチェイニングと相性がよい

Null合体代入は非同期処理やオプショナルチェイニングと組み合わせることで、初期値を簡単に設定できる。

例えば、APIからユーザー情報を取得する際、ユーザー名が取得できなかったときにデフォルト値を用意しておくことができる。

async function fetchUser() {
  const response = await fetch("/api/user");
  const user = await response.json();

  // 名前のデータが存在しない場合、"Guest" が初期値となる
  // ?. がオプショナルチェイニング記号
  user?.name ??= "Guest";
  return user;
}

Null合体演算子とNull合体代入の違い

おさらいとして、Null合体演算子とNull合体代入の違いをみていきます。

Null合体演算子

主な用途は値の評価・デフォルト値の設定。
左辺がnullまたはundefinedであれば右辺を使用（Null合体代入と違い、再代入は行わない）

Null合体代入

主な用途は変数の更新と代入。
左辺がnullまたはundefinedの場合にのみ、右辺で再代入する。

まとめ

• Null合体演算子とNull合体代入を利用する前に、nullやundefinedの挙動をよく把握しておく。
• Null合体演算子は、左のオペランドがnullまたはundefinedの場合、右のオペランドを（初期値として）返す、初期値を設定するためのもの
• Null合体代入は、左辺がnullまたはundefinedの場合のみ、右辺の値で左辺を更新（代入）してくれるもの。
• それぞれnullとundefinedのみを基準に処理を判別し、簡潔に処理を記述することができる。

以上、Null合体演算子とNull合体代入についてでした。

この記事がもしお役に立てたならとても嬉しいです！
もし記事の内容に誤りを発見された方は、Xまでお知らせいただけるとありがたいです。

本日は以上です。