ES2019で追加されたあれこれを使ってみる

EcmaScript, ES2019, JavaScript

この記事は最終更新日から1年以上が経過しています。

New ES2019 JavaScript features every developer should be excited about

https://blog.logrocket.com/new-es2019-javascript-features-every-developer-should-be-excited-about/
ってことで、ES2019がうまあじだそうです。

https://node.green/#ES2019
LTSではまだっぽそうですがカレントだといけそうなんで使ってみましょう。

string trimming

trimLeftがtrimStartに、trimRightがtrimEndという名前でも使えるそうです。

上記のブログでは
let message = "     Welcome to LogRocket      ";
message.trimStart(); // "Welcome to LogRocket      "
message.trimEnd(); // "Welcome to LogRocket";

と書いてあって「え、破壊的メソッドなの？これはアカンやつやん」て思ったんですが実際に試したところ
> let message = "     Welcome to LogRocket      ";
undefined
> message.trimStart();
'Welcome to LogRocket      '
> message.trimEnd();
'     Welcome to LogRocket'

となったんで変わらず非破壊的メソッドのようす。

more intuitive to users

ってことなんですが、右とか左とかって直観的じゃないんでしょうか？reduceRightとか・・・
https://www.scala-lang.org/api/2.12.0/scala/util/Either.html

Object.fromEntries

Object.entriesの逆版です。
Object.entriesはkvなオブジェクトを2個ずつの配列にするものでした。
obj =
  k1:"v1"
  k2:"v2"
 
Object.entries obj
# [ [ 'k1', 'v1' ], [ 'k2', 'v2' ] ]

このentriesな配列をオブジェクトに戻します。
Object.fromEntries( Object.entries(obj)  )
# { k1: 'v1', k2: 'v2' }

こういうのは地味に便利ですね。

Array.prototype.{flat, flatMap}

flattenがやっと使えるようになったようです。
[1,2,3,[4,5,6],7,8,[9,0]].flat()
# [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ]

つかってね。

flatMapは配列を返却するとそれらをflattenしてまとめるようです。
['my name is Gbols', ' ', 'and i am great developer'].flatMap (i)-> [1,2]
# [ 1, 2, 1, 2, 1, 2 ]

配列に配列を入れるとまとめないようです
['my name is Gbols', ' ', 'and i am great developer'].flatMap (i)-> [1,[2]]
# [ 1, [ 2 ], 1, [ 2 ], 1, [ 2 ] ]

['my name is Gbols', ' ', 'and i am great developer'].flatMap (i)-> i.split(" ")
# [ 'my', 'name', 'is', 'Gbols', '', '', 'and', 'i', 'am', 'great', 'developer]

こういう単語だけ抽出するみたいな構文は強力ですね。

Optional chaining

coffeeにあったやつです。?をつけることによってReferenceErrorを回避しnull/undefinedチェックをしなくてもよくなります。

The pipeline operator

|> という演算子を用いてshみたいに関数をつなげられるようです。shっぽく書けるのでよさそうですね。
const capitalize = (input) =>  input[0].toUpperCase() + input.substring(1);
const removeSpaces = (input) => input.trim();
const repeat = (input) => `${input}, ${input}`;
const withoutpipe = repeat(capitalize(removeSpaces('    i am gbols    ')));
console.log(withoutpipe); // I am gbols, I am gbols
But with the pipeline operator, readability can be greatly improved:
 
const withpipe = '    i am gbols    '
                |> removeSpaces
                |> capitalize
                |> repeat;
console.log(withpipe); // // I am gbols, I am gbols

というサンプル実行してみたんですが、

SyntaxError: Unexpected token ‘|’

と出ましてまだ実装されてないようです・・・

纏

coffeeとかruby由来の便利そうなものが追加されていきそうな雰囲気です。

この記事を書いた人

鈴木
鈴木juke / footworker
和服とvapeとСистемаと醗酵とたまごふわふわとカッティングシェイプスとジャージークラブとjuke/fwkに傾倒する人です

EcmaScript, ES2019, JavaScript