モダンJavaScript 新仕様(ES2017/2020/2021)
はじめに
ES6以降のモダンなJavaScript仕様について以前こちらの記事にまとめたのですが、個人的に知らなかったシンタックスなどあったので追加でまとめます。
// ES2017から
'7'.padStart(2, 0) // '07'
'7'.padEnd(2, '#') // '7#'
'7'.padEnd(6, 'abc') // '7abcab'
第一引数に結果の文字列の長さ、第二引数に繋げたい文字列(第一引数の数値によって繰り返す)。
// ES2020から
const friends = {
name: 'Tom',
hobby: {
sports: 'soccer',
}
}
friends?.films?.fav // undefined
参照や関数がundefined, nullの可能性であっても接続されたオブジェクトにエラーにならずにアクセスできる。
// ES2020から
null ?? 1 // null
undefined ?? 1 // undefined
false ?? 1 // false
0 ?? 1 // 0
1 ?? null // 1
1 ?? undefined // 1
1 ?? 2 // 2
左辺がnullもしくはundefinedの場合に右辺を返し、左辺がそれ以外なら左辺を返す。OR演算子(||)は左辺がfalsy(null, 0, "", undefined)かどうかを評価する点で異なる。
// これまで
import { Hello } from './module.js'
const module = new Hello()
// ES2020から
import('./module.js')
.then(module => {
const hello = new module.Hello()
})
// 返り値はPromiseなのでasync/awaitも使える
async function main() {
const module = await import('/module.js')
const hello = new module.Hello()
}
モジュールを関数のように呼び出すために導入された。ページの初期表示などでコンテンツが展開するたびにimportを行う(遅延ロード)ことで処理負荷を軽減できる。
// ES2021から
let a = 1
a &&= 2 // 2
a ||= 2 // 1
let b = 0
b &&= 2 // 0
b ||= 2 // 2