三個用得到的 JS 新Features (2020–2022)

yiz

5 min readDec 4, 2021

這篇文章想分享 2020~2022這三年間，三個超級實用的feature，包含:

Optional Chaining(?.)
Nullish Coalescing(??)
Array.prototype.at()

JS 每年都在出新的功能，處理特定議題、完善 promise、完善 class，完善ESMoudule⋯⋯，但這些其實沒有那麼容易用到🤪 。遇到了再去查，問題一定能夠被解決。

這裡分享三個絕對用得到的 feature ，應用上都非常的廣泛，雖然都有替代的寫法，但知道這些一定能夠對開發有很大的幫助。

Optional Chaining(?.)

Js 如果要拿 object 裡的 kay-value pair ，最容易遇到的就是 Uncaught TypeError。Optional Chaining 很好的解決了這個問題。

Syntax

reference?.prop

如果 reference 是 null 或 undefined，整個 expression 會直接 return undefined。

如果你想知道一家咖啡廳的咖哩拌飯價格，正常來說你應該要檢查咖啡廳有沒有賣咖哩拌飯，然後再問咖哩拌飯的價格。

但有了 Optional Chaining ，如果咖啡廳沒有咖哩拌飯，expression 會直接是undefined，不用再透過 if 並多一層縮排。甚至 method 跟 array 都可以用 Optional Chaining，十分的方便。

Nullish Coalescing(??)

Syntax

leftExpress??rightExpress

如果 leftExpress 是 nullish (null 或 undefined)，回傳 rightExpress;否則回傳 leftExpress。

有個很像的運算子，||。如果左邊的 expression 是 falsy，|| 會回傳右邊的 expression。

?? 跟 || 最大的不同是 nullish 跟 flasy 的概念，falsy 包含 0 跟 false，nullish 不包含 0 跟 false。有的時候你可能想要判斷是「這個數值存不存在」，這時用 nullish 就可以輕鬆辦到。

Array.prototype.at()

如果你寫過 python ，你應該知道 python 取得 list 最後一個 element 有多方便。 my_list[-1] 就輕鬆拿到最後一個 element。但 JS 中 myArray[-1] 這是object 取值的語法，只會把 myArray 當成 object 試圖取出 key 是 -1 的值，而得到 undefined。
而這樣的語法在 2021 被 V8支援，在 ES 2022 進入標準，降臨 JS 世界。可以跟以前麻煩的 myArray[myArray.length-1] 說再見了，真香。

結論

JS 推出很多新的語法，本篇介紹超級實用的三個語法 Optional Chaining(?.)、Nullish Coalescing(??)、Array.prototype.at()，希望可以幫助到你。
使用的時候注意瀏覽器支援的問題，還有 polyfill 是否能順利運作，開發環境可以隨意的更新，但使用者的瀏覽器可不能。Array.prototype.at() 在發文的當下，還不被 safari 支援。

Reference

如果這篇文章對你有幫助，可以 follow 我的 medium ，幫助我的文章能被設定為可被引擎搜尋。

三個用得到的 JS 新Features (2020–2022)

Optional Chaining(?.)

Syntax

Nullish Coalescing(??)

Syntax

Array.prototype.at()

結論

Reference

Written by yiz