ES2020で入るあついやつ

はいよ。

勝ったわね… pic.twitter.com/HGQAjQ1V2b

— 駆け出し亭めろたん、 (@renyamizuno_) December 11, 2019

つい先日、電動昇降デスクを買って気分上々↑↑の一般男性です。
よろしくおねがいします。

これは bosyu Advent Calendar 2019 の 12日目の記事でごわす。

よろしくね。

今回は個人的にずっとこれ欲しかったんすよ。っていうアレがES2020ではいりそうなので紹介するぞ！

Optional Chaining for JavaScript

みんなJSで

const fuga = object.hoge && object.hoge.fuga;

こういうの書くじゃん？
めっちゃ出てきたりするじゃん？

これをこうして

const fuga = object.hoge?.fuga;

こうじゃ。

優勝でしょこれ。

勝ち申したわ。

こんなかんじで function もうまく扱える。

const fuga = hoge?.();

こんな調子でできちゃう。
いいでしょ。

これを数年待ってた。

Nullish Coalescing for JavaScript

上のとにたやつですね。(雑)

const fuga = object.hoge || 'default fuga';

こういうの。
ここで object.hoge が空文字や0の場合、どうなるかというと'default fuga'になってしまいますよね。
多分意図していないですよね。

地味に困るというか面倒なやつですが、これを回避できるようになります！

const fuga = object.hoge ?? 'default fuga';

なんだよ??って

これで上の問題が回避されます！
nullとundefinedの場合だけデフォルトの値が入るような感じになるわけですね〜。
優秀では？？？？

あわせ技

この２つを合わせて使うとめちゃいい

const fuga = object.hoge?.fuga ?? 'default value';

object.hoge.fuga が 無いときは 'default value' を返すやつですね。
とても見やすい。

これを今のJSで書こうとすると

const fuga = object.hoge && object.hoge.fuga || 'default value';

こういう感じ？あってんの？
正確には0の場合とかがあるので違うけども。

まあパット見分かりづらいものが、だいぶ読みやすいものになるかなぁと思います！

最高！

今すぐ体験せよ

実はbabelのstage-3で使える。

最高の Optional Chaining と Nullish Coalescing を今すぐ体験せよ！！！