モダン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の可能性であっても接続されたオブジェクトにエラーにならずにアクセスできる。

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)かどうかを評価する点で異なる。

Dynamic import(動的インポート) 

// これまで
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

論理積(x &&= y)はxがtruthyの場合のみ代入。論理和(x ||= y)はxがfalsyである場合のみ代入。

コメントを残す

メールアドレスが公開されることはありません。