ES2015で拡張されたObjectの記法と分割代入を活用する
実際に使って勉強しながら、ES5とES2015でどのように書き方が変わるか比較してみました。
今回勉強するにあたって、
lukehoban氏のes6featuresを参考にしています。
以下に非常に簡潔にまとまったサンプルがあるので、興味のある方はこちらもご覧ください。
https://github.com/lukehoban/es6features#enhanced-object-literals
https://github.com/lukehoban/es6features#destructuring
本文中のコードの動作確認はNode.js 7.2.0で行っています。
拡張されたObjectの記法について
ES2015では、Objectの初期化時にこれらの事が出来るようになりました。
- メソッド宣言の簡略化
- プロパティ名と変数名が一致する時の簡略化
- プロパティ名の動的な定義
etc...
メソッド宣言の簡略化
ES5でメソッドを表現したい時は、値にfunction(){}をセットする必要がありましたが、
プロパティ名に()を付けることでこれを省略できるようになりました。
他の言語におけるメソッドと似た表現になります。
ES5
var rectangle = {
width: 400,
height: 300,
area: function() {
return this.width * this.height; // => 120000
}
};
ES2015
const rectangle = {
width: 400,
height: 300,
area() {
return this.width * this.height; // => 120000
}
};
__proto__をセットすれば親のメソッドも呼べる
ES2015
const triangle = {
__proto__: rectangle,
area() {
return super.area() / 2; // => 60000
}
};
プロパティ定義の簡略化
プロパティ名と、値としてセットする変数の名前が一致する時に、
変数名を省略して書けるようになりました。
ES5
var firstName = 'Taro';
var secondName = 'Yamada';
var user = {
firstName: firstName,
secondName: secondName
};
// user => { firstName: 'Taro', secondName: 'Yamada' }
ES2015
const firstName = 'Taro';
const secondName = 'Yamada';
const user = {
firstName,
secondName
};
// user => { firstName: 'Taro', secondName: 'Yamada' }
プロパティ名の動的な定義
Objectの初期化時に、動的にプロパティ名をセット出来るようになりました。
ES5
var currentId = 1;
var getNextId = function() { return currentId++; };
var users = {};
users['user' + getNextId()] = 'Bob';
users['user' + getNextId()] = 'Tom';
users['user' + getNextId()] = 'Mary';
// users => { user1: 'Bob', user2: 'Tom', user3: 'Mary' }
ES2015
let currentId = 1;
const getNextId = () => currentId++;
const users = {
[`user${getNextId()}`]: 'Bob',
[`user${getNextId()}`]: 'Tom',
[`user${getNextId()}`]: 'Mary'
};
// users => { user1: 'Bob', user2: 'Tom', user3: 'Mary' }
利用パターン
Enum風Objectと動的プロパティ定義をセットで使う
const Color = {
RED: 1,
BLUE: 2,
GREEN: 3
};
const ColorNames = {
[Color.RED]: '赤',
[Color.BLUE]: '青',
[Color.GREEN]: '緑'
};
// ColorNames => { '1': '赤', '2': '青', '3': '緑' }
const getColorName = (color) => ColorNames[color];
console.log(getColorName(Color.GREEN)); // => 緑
分割代入
Array, Objectのパターンマッチングによる分割代入が出来るようになりました。
分割代入の基本的な使い方
配列からの分割代入
const ppap = ['Pen', 'Pinapple', 'Apple', 'Pen'];
const [p1, p2, a, p3] = ppap;
console.log(p1); // => Pen
console.log(a); // => Apple
Objectからの分割代入
const pp = {
fruit: 'Pinapple',
stationery: 'Pen'
};
const { fruit, stationery } = pp;
console.log(fruit); // => Pinapple
関数の引数でのマッチング
const ap = {
fruit: 'Apple',
stationery: 'Pen'
};
const showFruit = ({ fruit, stationery }) => console.log(fruit);
showFruit(ap); // => 'Apple'
マッチしなかった時に使うデフォルト値の設定
const greeting = ({ name, language = 'en' }) => { // languageのデフォルト値を'en'にする
let msg;
switch(language) {
case 'ja':
msg = 'こんにちは！';
break;
case 'en':
msg = 'Hello!';
break;
default:
msg = 'No language matches';
}
console.log(`${name}, ${msg}`);
};
const name = 'Taro';
greeting({ name, language: 'ja' }); // => Taro, こんにちは！
greeting({ name }); // => Taro, Hello！
利用パターン
mapと組み合わせて分割代入する
ES5
var names = ['Bob', 'Tom', 'Mary'];
var users = names.map(function(name) { // namesをUserオブジェクトに変換
return new User({ name: name });
};
var bob = users[0];
var tom = users[1];
var mary = users[2];
ES2015
const names = ['Bob', 'Tom', 'Mary'];
const [bob, tom, mary] = names.map(name => new User({ name })); // Userオブジェクトへの変換と代入を一行で行う
値の入れ替え
@takeharuさんのもうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~より
ES5
var fruit1 = 'Apple';
var fruit2 = 'Pinapple';
console.log(fruit1, fruit2); // => Apple Pinapple
var tmp = fruit1;
fruit1 = fruit2;
fruit2 = tmp;
console.log(fruit1, fruit2); // => Pinapple Apple
ES2015
let [fruit1, fruit2] = ['Apple', 'Pinapple'];
console.log(fruit1, fruit2); // => Apple Pinapple
[fruit2, fruit1] = [fruit1, fruit2];
console.log(fruit1, fruit2); // => Pinapple Apple
####classのconstructorでマッチングを行う
class Pen {
constructor({ color, length = 8 } = {}) { // Penのデフォルトの長さを8にする。()内の右辺は、引数が無かった時のデフォルト値
this.color = color;
this.length = length;
}
}
const color = 'Black';
const normalPen = new Pen({ color });
console.log(normalPen.color); // => Black
console.log(normalPen.length); // => 8
const longPen = new Pen({ color, length: 12 });
console.log(longPen.color); // => Black
console.log(longPen.length); // => 12
const noArgumentsPen = new Pen();
console.log(noArgumentsPen.color); // => undefined
console.log(noArgumentsPen.length); // => 8
記事修正
初め、constructorの引数でのマッチングについては関数側でのnullチェックが出来ないので推奨しないとしていましたが、
({ pattern } = {})の形でデフォルト値を設定出来るので問題無いとご指摘いただきました。(@tksugimotoさん、ありがとうございます！)
追記
下記の補足コード(Case 5)の通り、明示的にnullを渡した場合(new Pen(null))はマッチングに失敗するとのことでした。
このケースに対応するには、下記のcallName4のように従来通りの形でnullチェックをする必要がありそうです。
明示的にnullが渡されることが無ければ、無視してしまっても構わないと思います。(個人・職場などの裁量次第によります…。)
補足コード
const callName1 = ({ name = 'Taro' }) => console.log(name);
const callName2 = ({ name = 'Taro' } = {}) => console.log(name); // こちらを推奨
const callName3 = ({ name } = { name: 'Taro' }) => console.log(name);
const callName4 = (params) => { // 引数でのマッチング無し
const { name = 'Taro' } = params || {};
console.log(name);
};
const name = 'Jiro';
// Case 1. Normal Argument
callName1({ name }); // => Jiro
callName2({ name }); // => Jiro
callName3({ name }); // => Jiro
callName4({ name }); // => Jiro
// Case 2. No Arguments
callName1(); // => TypeError: Cannot match against 'undefined' or 'null'.
callName2(); // => Taro
callName3(); // => Taro
callName4(); // => Taro
// Case 3. Blank Object
callName1({}); // => Taro
callName2({}); // => Taro
callName3({}); // => undefined
callName4({}); // => Taro
// Case 4. Built-in Object
callName1(1); // => Taro
callName2(1); // => Taro
callName3(1); // => undefined
callName4(1); // => Taro
// Case 5. Null
callName1(null); // => TypeError: Cannot match against 'undefined' or 'null'.
callName2(null); // => TypeError: Cannot match against 'undefined' or 'null'.
callName3(null); // => TypeError: Cannot match against 'undefined' or 'null'.
callName4(null); // => Taro
終わりに
基本的にはどれも便利な機能なので、積極的に使っていきたいです。
ただし、コードの密度を上昇させ可読性を損なう危険性があるので、用法用量を守って工夫しながら使う必要がありそうです。