ES2020: Optional chaining

[azu]

Optional chaining - JavaScript | MDN

https://jsprimer.net/basic/object/#confirm-property でまさにその事例があるので、ここで紹介する。
#1178 Nullish coalescing Operatorとの組み合わせについても紹介するといいのかもしれない?
ユースケースでこういう箇所あるかな?

やること

• https://jsprimer.net/basic/object/#confirm-property にセクションを追加? する [ES2020] ラベル
• Nullish coalescing Operator ES2020: Nullish coalescing Operator #1178 との組み合わせを考える

[azu]

#1178 Optional Chainは暗黙的 nullish という言葉の定義に依存している感じがする。

なので、理想的に Nullish coalescing Operator → Optional Chaining の順番になるのがよさそう

• https://github.com/asciidwango/js-primer/blob/master/test/summary-test.js のテストに nullish を入れる

https://tc39.es/ecma262/#sec-optional-chains

[azu]

Refactoring optional chaining into a large codebase: lessons learned – Lea Verou

[azu]

こういうのとかあるけど、うーん。なんか言い換えるほどのメリットがでてない

// `options`が指定されなかったときは空のオブジェクトが入る
function wrapText(text, options = {}) {
    const prefix = options.prefix ?? "接頭辞:";
    const suffix = options.suffix ?? ":接尾辞";
    return prefix + text + suffix;
}
// falsyな値を渡してもデフォルト値は代入されない
console.log(wrapText("文字列")); // => "接頭辞:デフォルト:接尾辞"
console.log(wrapText("文字列", {
    prefix: "Start:",
    suffix: ":End"
})); // => "Start:文字列:End"
// オプションの一部だけを指定した場合は、それぞれのデフォルト値が採用される
console.log(wrapText("文字列", { prefix: "カスタム:" })); // => "カスタム:デフォルト:接尾辞"
console.log(wrapText("文字列", { suffix: ":カスタム" })); // => "接頭辞:文字列:カスタム"

Optional chaining（?.）を利用することで、デフォルト引数の指定は次のように書き換えることもできます。

function wrapText(text, options) {
    // `options`がundefinedまたはnullの時点で右辺を評価する
    const prefix = options?.prefix ?? "接頭辞:";
    const suffix = options?.suffix ?? ":接尾辞";
    return prefix + text + suffix;
}
// falsyな値を渡してもデフォルト値は代入されない
console.log(wrapText("文字列")); // => "接頭辞:デフォルト:接尾辞"
console.log(wrapText("文字列", {
    prefix: "Start:",
    suffix: ":End"
})); // => "Start:文字列:End"
// オプションの一部だけを指定した場合は、それぞれのデフォルト値が採用される
console.log(wrapText("文字列", { prefix: "カスタム:" })); // => "カスタム:デフォルト:接尾辞"
console.log(wrapText("文字列", { suffix: ":カスタム" })); // => "接頭辞:文字列:カスタム"

[azu]

存在確認ではなくて、プロパティのアクセスでやるといいのかな?

[azu]

const printWidgetName(widget){
  console.log(widget?.window?.title ?? "名前はありません");
}
const widget = {
    window: {
        title: "ウィジェットのタイトル"
    }
};
printWidgetName(widget);

こんな感じのOptional chaining（?.）を使って実装する例と、if文で実装する例で比較する感じで紹介するのが良さそうな気がする。
最初の例がtypoなのがちょっと微妙なのかな?

ちょっとアウトラインを整理して考えてみるのがよさそう