yutaponのブログ

javascript界隈の興味あるネタを備忘録的に残しておく場所

ES6構文の ... (Spread operator)と { prop } (shorthand property names)について

es6

昨日twitter見てたらこんなのが流れていまして

何だこの書き方〜と気になったので調べてみた。

... (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はまだまだ使いこなせていない機能が多いのでもっと触っておかなければ。

昼休みにパパっと書いた記事なので軽めに終わります。