JavaScriptのES2019の変更点と新機能のガイド

@flaviocopesさんのサイトで、ES2019のガイドが公開されています。

ひととおり目を通したので、自分なりに解釈した要約を書きます。

Array.prototype.flat()

flat()は、配列内の配列を平坦に整えた、新しい配列を生成します。引数で深さを受け取り、何段階まで平坦化するのか指定できます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

const arr1 = [1, 2, [3, 4, [5, 6]]];
console.log( arr1.flat() ); // [ 1, 2, 3, 4, [ 5, 6 ] ]

const arr2 = [1, 2, [3, 4, [5, 6]]];
console.log( arr2.flat(2) ); // [ 1, 2, 3, 4, 5, 6 ]

// Infinity は無限大を表す数値です。
// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity
const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log( arr3.flat(Infinity) ); // [ 1, 2, 3, 4, 5, 6 ]

Array.prototype.flatMap()

flatMap()は、最初にマッピング関数を使用してそれぞれの要素をmapした後に、flatを適用した新しい配列を返す関数です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

const arr1 = ['I have a keyboard .', 'I have a  mouse .'];
console.log( arr1.flatMap(str => str.split(' ')) );
// ['I', 'have', 'a', 'keyboard', '.', 'I', 'have', 'a', '', 'mouse', '.']

// map()した後にflat()するようなイメージ
const arr2 = ['I have a keyboard .', 'I have a  mouse .'];
console.log( arr2.map(str => str.split(' ')).flat() );

Optional catch binding

エラーを受け取らないcatchを書くことができます。 Optional、つまりエラーが任意になりました。

try {
    throw "Error";
} catch {
    // catch(e)とする必要がない
    console.log('Error!!');
}

Object.fromEntries()

キーと値の組み合わせをオブジェクトに変換します。引数として受け取るのはiterableな値で、ArrayやMapなどの反復処理可能なオブジェクトです。

// 配列のオブジェクト化
const arr = [
  ['key', 'value'],
  ['coffee', 'boss'],
];
// { key: 'value', coffee: 'boss' }
console.log( Object.fromEntries(arr) );

// Mapのオブジェクト化
const map = new Map([
  ['key', 'value'],
  ['coffee', 'boss'],
]);
// { key: 'value', coffee: 'boss' }
console.log( Object.fromEntries(map) );

String.prototype.trimStart()

文字列の先頭の空白を削除します。なおtrimLeft()は、このメソッドのエイリアスです。

console.log('空白'.trimStart());   // '空白'
console.log('  空白'.trimStart()); // '空白'
console.log('空白  '.trimStart()); // '空白  '

String.prototype.trimEnd()

文字列の末尾の空白を削除します。なおtrimRight()は、このメソッドのエイリアスです。

console.log('空白'.trimEnd());   // '空白'
console.log('  空白'.trimEnd()); // '  空白'
console.log('空白  '.trimEnd()); // '空白'

Symbol.prototype.description

Symbol型はES2015の新機能ですが、それに対してdescriptionが追加されました。

const sym = Symbol('I have a keyboard.');

// toString()とは出力される値に違いがある点に注意する
console.log(sym.description); // I have a keyboard.
console.log(sym.toString()); // Symbol(I have a keyboard.)

JSONにおける\u2028と\u2029問題の改善

これは一言で説明すると、”LINE SEPARATOR (U+2028)”と”PARAGRAPH SEPARATOR (U+2029)”を含む文字列を、JSONで正常に扱えるようになったという改善です。

従来、JSONはJavaScript の完全に厳密なサブセットではありませんでした。文字コードポイント U+2028 LINE SEPARATOR (改行) と U+2029 PARAGRAPH SEPARATOR (改段落) は JSON テキスト内の文字列リテラルやプロパティ名に使用することができます。
しかし、 JavsScript のテキスト内で同様の文脈では使用することができません -- Unicode エスケープを使用した \u2028 および \u2029 しか使うことができません。これは最近変更され、どちらのコードポイントも JSON と JavaScript の両方の文字列で使用することができるようになりました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify より

JSONにおけるサロゲート文字列のエンコード問題の改善

// 今まで
console.log( JSON.stringify("\uD800") ); // '文字化けのような表示になる'
// これから
console.log( JSON.stringify("\uD800") ); // '"\\ud800"'

Function.prototype.toString()

関数をtoString()で出力したときに、コメントが残ります。地味な修正なので、お世話になる機会はあまりないかもしれません。

ES2019 introduced a change to the return value to avoid stripping comments and other characters like whitespace, exactly representing the function as it was defined.
https://flavioAcopes.com/es2019/ より

function /* I hav a keyboard. */ typing() {}

// v12.6.0のnode.jsでは、コメントが残っている
console.log(typing.toString()); // function /* I hav a keyboard. */ typing() {}
// v8.11.1のnode.jsでは、コメントが取り除かれている
console.log(typing.toString()); // function typing() {}