Tagbangers Blog

JavaScriptの新機能たち

JavaScriptの仕様標準であるECMAScriptはTC39という団体により使用が策定されています。 ProposalはGithubのレポジトリにまとめられています。

Proposalにはstageというものがあり、stage 0から順にstage 4へ上がっていくというプロセスを経て最終的にECMAScriptに採用されます。

  • Stage 0 - Strawman(たたき台)
    • アイデア段階
  • Stage 1 - Proposal(提案)
    • 必要性や解決方法についての説明がある
    • 実際にPolyfillやデモが実装される
  • Stage 2 - Draft(下書き)
    • 仕様書の初期案
    • 具体的な構文についての案
  • Stage 3 - Candidate(候補)
    • 仕様書が完成
    • レビュアーによる承認
    • ECMAScriptのエディタによる承認
  • Stage 4 - Finished(完了)
    • 主要な2つJSエンジンでの実装が必要
    • ECMAScriptのエディタによる承認
    • 標準仕様としてリリース待ちの状態

気になるProposalたち

Array.prototype.flat / Array.prototype.flatMap - ECMAScript2019 (ES10)

IE / Edge 以外はもう使えます。

const arr1 = [1, 2, [3, 4]]
const result = arr1.flat() // -> [1, 2, 3, 4]

arr1 // -> [1, 2, [3, 4]]

引数にはdepthを指定します

const arr1 = [1, 2, [3, [4, 5]]]

arr1.flat(1) // -> [ 1, 2, 3, [ 4, 5 ] ]
arr1.flat(2) // -> [ 1, 2, 3, 4, 5 ]

flatMap は最初に各要素をマップして、フラットにした配列を返します。

const arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" ")); // -> [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" ")); // -> ["it's","Sunny","in", "", "California"]

Numeric Separators - stage 3

桁数の多い数字を読みやすくするために、_を使えるようにするものです。

1_000_000
1_234_500


https://github.com/tc39/proposal-numeric-separator

Optional Chaining - stage 3

ネストしたオブジェクトのプロパティにアクセスする際、中間にあるプロパティが存在しないとエラーがおきます。

const o = { foo: { bar: { baz: 0 } } }
o.foo.non.baz
// -> Uncaught TypeError: Cannot read property 'baz' of undefined

そのため、以下のようにチェックすることが多いのではないでしょうか

o.foo.bar && o.foo.bar.baz

Optional Chainingでは以下のように?.を使うことで、左側のプロパティがnullundefinedの場合にundefinedが返るようになります。

o.foo.bar?.baz

APIから取得したJSONを扱う際に頻発するケースなので、すぐにでも使いたいですね。

https://github.com/tc39/proposal-optional-chaining

TypeScriptなら 3.7.2~ で使えるようになりました。


The Pipeline Operator - stage 1

新しい演算子 |>です。左辺の値を引数として、右辺の関数を呼び出すことができます。

 x |> f
// ==> f(x)

例えば以下のように、複数の関数呼び出しが行う場合

const double = (n) => n * 2;
const increment = (n) => n + 1;

double(increment(double(10)))

以下のように書けるようになります。

10 
  |> double
  |> increment
  |> double

https://github.com/tc39/proposal-pipeline-operator