Programming Self-Study Notebook

勉強したことを忘れないように!　思い出せるように!!

JavaScriptの追加機能メモ（ES2020（ES11））

JavaScript


久しぶりにJavaScriptでの開発を行うことになったので、過去のアップデートを拾ってみました。

ちなみに以下も記載しています。気になる方は目次だけでも眺めてみてください。
- JavaScriptの追加機能メモ（ES2019（ES10））


BigInt型の導入

  • Number型では大きすぎて表すことのできない数値を表現したり操作することが可能となる。Number型は2の53乗-1を超えると精度が落ちてしまいますが、BigIntを用いれば正確に整数を扱える。 使い方は、整数の末尾にnを付けるか、BigInt(数字) とする
const num = 200n // bigint型
const num2 = BigInt(300) // bigint型

console.log(typeof num); // 'bigint'
console.log(typeof num2); // 'bigint'

オプショナルチェーン(?.)で安全にチェーン

  • 構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組み。
    • 従来は存在しないプロパティにアクセスするとエラーが発生していたが、オプショナルチェーンを利用すると、存在しないプロパティにアクセスしてもundefinedとなる。
// 従来の書き方
if (obj.foo) {
    console.log(obj.foo.baa);
}

// ES2020以降の新しい書き方
console.log(obj.foo?.baa);  // => foo が未定義の場合は undefined

null合体演算子(??)

  • A ?? Bと記載した場合、Aがnullかundefinedの場合はBを評価し、そうでないならAとを評価する。
const A = null
const B = A ?? "コーヒー"
console.log(B) // コーヒー
const C = "紅茶"
const D = C ?? "コーヒー"
console.log(D) // 紅茶

正規表現でマッチした文字列をイテレータで返す(matchAll)

const str = "1ab5cdef4gh5i"
console.log([...str.matchAll(/[0-9]+/g)])
/**
 * [
  [ '1', index: 0, input: '1ab5cdef4gh5i', groups: undefined ],
  [ '5', index: 3, input: '1ab5cdef4gh5i', groups: undefined ],
  [ '4', index: 8, input: '1ab5cdef4gh5i', groups: undefined ],
  [ '5', index: 11, input: '1ab5cdef4gh5i', groups: undefined ]
]
 */

論理演算子(||)

  • 従来から論理演算子の (A || B) もあった。→ Aがfalsy(偽とみなせる値)のときにBが評価される
    • null合体演算子のほうが対象が狭くなる。

for-in文の順番が保証される

  • 従来はfor-in文で繰り返されるオブジェクト等の順番は必ずしも先頭からイテレートされるのではなく、順不同だった。ES2020からはその順番が保証るようになった。

その他

  • importしたものをそのままexportする
  • モジュールのメタ情報を得る
  • Promise.allSettledによる非同期処理
  • ブラウザとNode.js共通のグローバルオブジェクト(globalThis)