【Javascript】??演算子と.?演算子

この演算子はES2020で導入されるらしいですが、react-nativeを入れるとこちらの機能を含んだbabelプラグインがインストールされて最初から使えるようになってるみたいです。

最初サンプルとかで出てきて？？となってましたが、検索がしづらいのなんの。名前を覚えましょう。

どちらもnull, undefinedをチェックしてくれてifを減らせるのでスッキリしたコードに出来ます。

Null合体演算子 (??) (Nullish Coalescing Operator)

デフォルト値の適用に使えます。OR演算子と似てますがこちらは0、''、falseなどのfalsyな値もnull扱いになります。

developer.mozilla.org

  let emp = false;

  // OR演算子 (||)  null, undefined, falsyな値の場合右を返す
  let oaru = emp || 'def';
  console.log(oaru); //def

  // Null合体演算子  (??) null, undefinedのみ右を返す。falsyな場合の場合は左を返す
  let nuruga = emp ?? 'def';
  console.log(nuruga); //false

オプショナルチェイニング演算子 (?.) (Optional Chaining Operator)

プロパティやメソッド呼び出しのnullチェックができます。

developer.mozilla.org

オブジェクトがnullだとプロパティやメソッド呼び出しでエラーになりますので、これを回避してundefinedが返ります。

  let nuruob = null;
  // let nuruob = { age: 30 };
  console.log(nuruob?.age); // undefined
  console.log(nuruob.age); // nullだとエラー

配列がnullだとindex指定でエラーになりますので、これを回避してundefinedをundefinedが返ります。

// let arr = [1, 2, 3];
let arr = null;
console.log(arr?.[0]); // undefined
// console.log(arr[0]); // nullだとエラー