ES6構文の ... (Spread operator)と { prop } (shorthand property names)について
昨日twitter見てたらこんなのが流れていまして
Concatenating arrays in ES6:
arr = [...a, ...b, ...c]; // ES6
arr = a.concat(b, c); // ES5
http://t.co/4scyTyhmIo
— Axel Rauschmayer (@rauschma) 2015, 6月 3
何だこの書き方〜と気になったので調べてみた。
... (Spread operator)
この三点リーダーのことですが、よく...args
と書いているコードを見かけます。
あまり深く考えずに、arguments
が取得できるのかなと思ってたのですが、...
のふるまいを知るとなるほどと思いました。
...arr で arr(Array型)の要素をイテレートする
困ったときのMDNを見ると、こんなサンプルがあります。
こちらはES5 syntaxでarr2の要素をarr1に全て追加するコードです。
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // Append all items from arr2 onto arr1 Array.prototype.push.apply(arr1, arr2);
ES6のSpread operatorを使うとこのようになります。
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2); console.log(arr1); // [0, 1, 2, 3, 4, 5]
普通にやろうと思うと、arr2をmapとか使ってイテレートして、arr1にpushするコードになると思いますが、ES6だと短く書けるわけですね。
短く書けるけれど、慣れていないと可読性が落ちてしまう気もするので乱用はよくないかもしれない。
Shorthand property names
ES6からオブジェクトのkeyとvalueの組み合わせが一致する場合、keyを省略できるようになってます。
どういうことかというと、こんなコードです。
サンプルコードはMDNから拝借してきました。
// Shorthand property names (ES6) var a = "foo", b = 42, c = {}; var o = { a, b, c };
ES5まではこのように書かなければなりません。
var a = "foo", b = 42, c = {}; var o = { a: a, b: b, c: c }; // ←冗長に見える
何か冗長に見えますよね。
この省略記法はスッキリ見えていいので、よく使っていきたいです。
ES6 modulesでのShorthand property names
実はES6で書いたことがある人は既に省略記法を使っているのでは。
たとえばこういうコード。
// @file lib/math.js export const PI = Math.PI;
// @file app.js // ES6 modules import { PI } from './lib/math';
これはつまり、
// 擬似コード import { PI: this.PI } from './lib/math'; // thisはlib/mathでexportされたオブジェクト
こんな感じの動きになっているのでは。
こういう風に見えてくると、ES6 modulesにすんなり入っていける気がします。
おわりに
ES6はまだまだ使いこなせていない機能が多いのでもっと触っておかなければ。
昼休みにパパっと書いた記事なので軽めに終わります。