構文

分割代入

【JavaScript/React】よく使うメソッドや構文 25 選 #初心者 - Qiita

// 配列の分割代入
const [a, b] = [0, 1];
console.log(a); // 0
console.log(b); // 1

// オブジェクトの分割代入
const user = { name: "John Doe", email: "johndoe@example.com" };
const { name, email } = user;
console.log(name); // John Doe
console.log(email); // johndoe@example.com

Nullish

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

Nullish value - MDN Web Docs 用語集 | MDN

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

Optional chaining (?)

オプショナルチェーン (?.) - JavaScript | MDN

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

// containerが存在しないとき、式はundefinedを返しinnerTextの参照を行わない。
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

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

Note

三項演算子は状況に応じて異なる値の定数を定義するのに便利だが、書き足していくうちに読みにくくなるので嫌われている。

JavaScript だと即時関数に置き換えることができる。三項演算子よりこちらのほうがおすすめ。

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

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

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

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

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

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

JavaScript にはこういった演算子が存在しないので、いつもどおり書く。

// 例2
document.getElementById("container").innerText = "something";

TypeScript は JavaScript のスーパーセットだから、例 1、例 2 どちらの書き方もできる。あってもなくても同じなら演算子を書かなくてもいいんじゃないの、と思うかもしれないが、この演算子を書いておくことで左に書いたものが Nullish じゃないよ、と TypeScript コンパイラやプログラマーに伝えることができるのだ。

別の例として、実装上は Nullish ではないが、机上では Nullish になりうる場合を考える。

こういった場合も非 null アサーション演算子を使ってエラーを回避することができる。

class Human {
  private name!: string; /* インスタンス生成後はupdate()を実行することで必ずnameに値を代入すること */

  update(name: string) {
    this.name = name;
  }

  sayHello() {
    console.log("Hello");
  }
}

const human = new Human();
human.update("Hoge");
human.sayHello();