はいよ。
勝ったわね… 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 を今すぐ体験せよ！！！