ECMAScript 2021の対応

[azu]

ECMAScript 2021対応のmeta issueです。

proposals/finished-proposals.md at master · tc39/proposals

やりかた

• 検討リストから対応するべきかを決める
• 対応するものは別途Issue化する
• 対応する
• すべて対応したら book.js を更新

検討リスト

• String.prototype.replaceAll String.prototype.replaceAll #1310
• Numeric Separators Numeric Separators #1311
• Promise.any + AggregateError
• WeakRefs
• Logical Operators and Assignment Expressions

過去

• ECMAScript 2020の対応 ECMAScript 2020の対応 #1145

[azu]

Feature watch: ECMAScript 2021

[azu]

• ECMAScript 2021: the final feature set
  • Release ES2021 Candidate March 2021 · tc39/ecma262

ES 2021 CRがでた

[azu]

Related

• ES2021 edition of “JavaScript for impatient programmers”

New JavaScript features • JavaScript for impatient programmers (ES2021 edition) みたいに差分へのリンクを追加するの良いかも

[azu]

String.prototype.replaceAll

#1182 はES2020で、ES2021でreplaceAll

replaceメソッドには正規表現も指定できます。 gフラグを有効化した正規表現を渡すことで、文字列からパターンにマッチするものをすべて置換できます。
https://jsprimer.net/basic/string/#replace-delete

があるので、これの別解としてreplaceAllは追加するのが妥当。
用途的には正規表現を使わずにすべてを置換したい場合となる。
正規表現も渡せるが /g がないとエラーとなることについて触れる。

Regular expressions (RegExp) • JavaScript for impatient programmers (ES2021 edition)

Issue: #1310

[azu]

Promise.any + AggregateError

最初に成功したものを得る Promise.any 。
投機的に複数走らせて最初に取れたものがいいみたいな状態

• Promises for asynchronous programming [ES6] • JavaScript for impatient programmers (ES2021 edition)

これはユースケースではでてこなから取り扱わなくてもいい気がする。
一方で、全てがエラーの場合はAggregateErrorを返すという複数エラーの扱い方が追加されている。
この AggregateError 自体は 例外処理 · JavaScript Primer #jsprimer に入れてもいいかもしれない。

保留な感じがする

Related: azu/promises-book#335

[azu]

WeakRefs

WeakRefとFinalizationRegistryによる、弱い参照とGC時の動作。

WeakMapとWeakSetの章はあるけど、Weakの話を追加するほどじゃない気はする。
これはskipすると思う。advancedな感じがする。

この書籍の範囲外な感じがする。

[azu]

logical-assignment

// "Or Or Equals" (or, the Mallet operator :wink:)
a ||= b;
a || (a = b);

// "And And Equals"
a &&= b;
a && (a = b);

// "QQ Equals"
a ??= b;
a ?? (a = b);

が増える。
基本的に再代入でしかないので、結構扱いが難しい気がする。

function printWidgetTitle(widget) {
    const title = widget?.window?.title ?? "未定義";
    console.log(`ウィジェットのタイトルは${title}です`);
}
printWidgetTitle({
    window: {
        title: "Book Viewer"
    }
}); // "ウィジェットのタイトルはBook Viewerです" と出力される
printWidgetTitle({
    // タイトルが定義されてない空のオブジェクト
}); // "ウィジェットのタイトルは未定義です" と出力される

は

function printWidgetTitle(widget) {
    widget.title ??= "未定義";
    console.log(`ウィジェットのタイトルは${widget.title}です`);
}
printWidgetTitle({});

みたいな感じにするとかはありそうだけど、次のようには書けないので微妙。
そもそもオブジェクトに再代入してる時点で、引数で受け取ったオブジェクトを書き換えてるので良くない(どこかのコラムでそういうのを書いてた気がする?)

function printWidgetTitle(widget) {
    widget?.window?.title ??= "未定義";
    console.log(`ウィジェットのタイトルは${title}です`);
}
printWidgetTitle({
    window: {
        title: "Book Viewer"
    }
}); // "ウィジェットのタイトルはBook Viewerです" と出力される
printWidgetTitle({
    // タイトルが定義されてない空のオブジェクト
}); // "ウィジェットのタイトルは未定義です" と出力される

検索のために、付録: JavaScriptチートシート · JavaScript Primer #jsprimerに入れるのはありだけど、本文にはあんまり入れるユースケースが思いつかない

[azu]

Numeric Separators

let budget = 1_000_000_000_000;

// What is the value of `budget`? It's 1 trillion!
// 
// Let's confirm:
console.log(budget === 10 ** 12); // true

区切り文字に _ を使えるよってだけ。見た目だけ

• https://jsprimer.net/basic/data-type/#Bigint-literal
• 付録: JavaScriptチートシート · JavaScript Primer #jsprimer

にそれぞれ追加するぐらいで良いかもしれない。

あと https://jsprimer.net/basic/operator/#bit-operator ビット演算の所でこれを使って見やすくするとか良さそうなきがするので、検討する

Issue: #1311

[azu]

• String.prototype.replaceAll String.prototype.replaceAll #1310
• Numeric Separators Numeric Separators #1311

それぞれIssueを作った

[azu]

#1220 (comment)
リリースノートへのリンクみたいのどうするかちょっと迷うな。
この書籍は網羅が目的じゃないので、ESバージョンとはあんまり対応してない

[azu]

Ecma International approves new standards - Ecma International でES2021は正式に承認された

[azu]

logical-assignment

https://jsprimer.net/basic/operator/#assignment-operator で 他の += とかは紹介してるので、入れるのはありだけど(サンプルコードはない)、どうするべきかなー
演算子はやっぱり無限に膨れるので、次のタイミングで削りたい

#1334 でやってみたけどいまいちだったので入れないことにする