2.0.0: ECMAScript 2020対応
2.0.0
JavaScript Primerのウェブ版をECMAScript 2020に対応しました 🎉
JavaScript Primerのウェブサイトから閲覧できます。
- ウェブサイト: https://jsprimer.net/
- 対応のサマリIssue: ECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primer
ECMAScript 2020
The 119th General Assembly held as a virtual meeting on June 16, 2020, approved the following documents:
ECMA-262 11th edition - ECMAScript® 2020 Language Specification
ECMA-402 7th edition - ECMAScript® 2020 Internationalization API Specification
ECMAScript 2020は2020年06月にEcma Internationalによって正式に承認された仕様です。
ECMAScriptの仕様策定のプロセスについては次のページを参照してください。
2.0.0の変更点
2.0.0では次の項目についてそれぞれ書籍の内容を変更、追加しています。
for-in mechanics
for...in
文がプロパティを列挙する順番はES2019までは実装依存だった。
これがES2020では仕様として列挙する順番が規程されたので、異なる列挙をするブラウザは基本的になくなる。(現時点ではすでにどのブラウザも同じ順番)
背景としては、Reflect.ownKeys
(ES2015)が入った際に大体の実装が同じ列挙順に統一されていた。
そのため実装依存だった順序の仕様を定義するように修正された。
詳細
- https://github.com/tc39/proposal-for-in-order
- https://github.com/tc39/proposal-for-in-order/blob/master/exploration/README.md
- tc39/ecma262#1791 仕様の修正
- tc39/test262#2432 テストの実装
export * as ns from "mod";
- 対象ページ ECMAScriptモジュール
- Issue: #1177
- PR: #1203
ES2020では、export * as ns from "mod";
という再エクスポートの構文が追加された。
- https://github.com/tc39/proposal-export-ns-from
- Normative: Add
export * as ns from "mod”
to Export production and Module Semantic by spectranaut · Pull Request #1174 · tc39/ecma262
ES2015での見落とし的な構文で、ES2015では次のように書く必要があった。
import * as ns from "./module.js";
export { ns };
これを次のように1行で書けるように追加された構文。
export * as ns from "./module.js";
String.prototype.matchAll
ES2020では String.prototype.matchAll
という正規表現のg
フラグを使った繰り返しマッチに対応したメソッドが追加された。
今まではRegExp.prototype.exec
メソッドで繰り返しマッチを表現していたが、String.prototype.matchAll
メソッドというIteratorを返すメソッドに置き換えることができる。
変更点
- マッチした文字列の取得を書き直し
Sttring#match
とString#matchAll
をベースに変更
RegExp#exec
はString#matchAll
が利用できる場合に使う状況がないため、コラムに変更RegExp#exec
は 基本的には利用することはなくなったメソッドであるため- 既存のコードを読むと出てくる可能性はあるので、コラムとして残している(結構なトリッキーなコードでもある)
- 基本は
Sttring#match
とString#matchAll
の対比で話を進めた
globalThis
実行環境でwindow
やglobal
などグローバルオブジェクトの参照方法がバラバラだった。
これをまとめた概念としてglobalThis
がES2020で追加された。
BigInt
新しいデータ型としてBigInt
が追加された。
- BigIntとは巨大な整数を表現するための新しいリテラル
1n
のようにn
というsuffixをつけるリテラル- 数値リテラルでは
2^53-1
よりも大きな値は精度が足りずに正確に表現できない - BigInt自体は7番目の新しいプリミティブ型として定義されている
- そのため、typeofに"bigint"が追加されている
- 浮動小数点表現に
n
をつけた場合は構文エラーとなる - BigIntの
0n
も falsy に追加 #445
Nullish coalescing演算子(??
)とOptional chaining演算子(?.
)
- 対象ページ:
- Issue:
- PR: #1205
Nullish coalescing演算子(??
)は、左辺の値がnulishであるならば、右辺の評価結果を返す。
nulishとは、評価結果がnullまたはundefinedとなる値のこと。
Optional chaining演算子(?.
)は、左辺のオペランドがnullish(nullまたはundefined)の場合は、それ以上評価せずにundefinedを返す。
一方で、プロパティが存在する場合は、そのプロパティの評価結果を返す。
どちらもNullishを扱うため、まとめて対応。
どちらの演算子も利用できる場所が広いため、かなり幅広いページを書き換えている。
変更点
- falsyの説明を演算子の章に移動
- falsyの対応としてnullishを演算子の章で解説するため
- Optional chaining演算子の(
?.
)の解説を"オブジェクト"の章に追加 - Nullish coalescing演算子(
??
)とOptional chaining(?.
)の組み合わせを説明 - Nullish coalescing演算子(
??
)の解説を"演算子"の章に追加 - 一部のコードを
||
を??
に置き換え- 例としては問題ないけど、
??
推奨気味に変更
- 例としては問題ないけど、
チートシートのES2020の対応
- 対象ページ: 付録: JavaScriptチートシート
- Issue: #1204
- PR: #1247
チートシートにES2020で増えた構文を追加。
- Nullish coalescing演算子(
??
) - Optional chaining(
?.
) - BigInt(
42n
) export * as ns from "./x.js"
含まれなかったES2020の変更点
次のES2020の変更は、現時点のJavaScript Primerでは含まれていません。
Promise.allSettled
import()
import.meta
詳細はECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primerを参照してください。