?や!を使う演算子いろいろ

以降、Nullishという用語が出てくる。

Nullish とは、JavaScript, TypeScript においてnullもしくはundefinedのことである。

Nullish value - MDN Web Docs 用語集 | MDN

オプショナルチェーン (?)

左の項が Nullish のとき、そこで評価を終え式はundefinedを返す。

// containerが見つからないとき、undefined = "something";相当になる
// innerTextの参照は行われず、結果として何もしない
document.getElementById("container")?.innerText = "something";

非 null アサーション演算子 (!)

これは TypeScript の演算子である。

左の項が Nullish のとき、アサーションを発生させる。

式が参照される際、絶対Nullishじゃないと言い切れる場合はこの演算子を使って警告を無視することができる。

// containerが絶対見つかる自信があるならこう書ける
// 実行時に見つからなかったらエラーが発生する
document.getElementById("container")!.innerText = "something";

null 合体演算子 (??)

左辺が Nullish のとき、右辺の値を返す。

似たような演算子に||があるが、||は左辺が ""、0、false の場合でも右辺の値を返す点で異なるので注意が必要である。

const a = null ?? "aaa";
console.log(a); // aaa

const b = false ?? "aaa";
console.log(b); // false

const c = null || "aaa";
console.log(c); // aaa

const d = false || "aaa";
console.log(d); // aaa

使い道として、デフォルト値が挙げられる。

// containerが見つからない場合、"default value"を代入する
const text = document.getElementById("container")?.innerText ?? "default value";

null 合体代入 (??=)

左辺が Nullish のとき、代入を行う。

let a = null;
a ??= "aaa";
console.log(a); // aaa

三項演算子 (condition ? a : b)

条件が満たされるとき、a が代入される。そうでない場合、b が代入される。

const a = 10;
const b = a >= 10 ? "More than 10" : "Less than 10";
console.log(b); // More than 10

三項演算子は状況に応じて異なる値を定義するのに便利だが、書き足していくうちに読みにくくなることを理由に嫌う人もいる。

JavaScriptでは三項演算子を即時関数に置き換えて記述することもできる。

const a = 10;
const b = (() => {
  if (a >= 10) {
    return "More than 10";
  }
  return "Less than 10";
})();
console.log(b); // More than 10