[GAS]オブジェクトリテラルと仲良くなろう【中編】‐3日目‐

どうも。つじけ（tsujikenzo）です。このシリーズでは「２次元配列をオブジェクトに変換する」という内容で全6回でお送りします。今日は第3回目です。

前回のおさらい
V8でこんな書き方ができるようになった
オブジェクトの分割代入
まとめ
このシリーズの目次

前回のおさらい

前回は、「オブジェクトをリテラルに記述する為にはいくつかルールがあるよ」 という内容をお伝えしました。

また、シンタックスハイライトを例に 「ルールさえ合っていれば、オブジェクトだと判断するよ」 という補足もしました。

どうも。つじけ（tsujikenzo）です。このシリーズでは「２次元配列をオブジェクトに変換する」という内容で全6回でお送りします。今日は第2回目です。引き続きオブジェクト、特にオブジェクトリテラルの基礎について前編・中編・後編としてまとめ

今回は、実践で使われるオブジェクトリテラルの書き方についてまとめます。

V8でこんな書き方ができるようになった

前回お話した、「プロパティキーに角カッコ[]を使って変数を使用できる」 という機能は、V8から搭載されたものですが、他にも便利な書き方ができるようになっています。

キーとバリューが重複する際のプロパティの短縮

const name = '辻健蔵';
const age  = 45;
const favorite = 'coffee';

let obj = {
name:name,
age:age,
favorite:favorite
};

obj = {name, age, favorite};

オブジェクト（配列）の代入

const person = ['name', 'age', 'favorite'];
obj = { person };
console.log(obj); //{person:['name','age','favorite']}

オブジェクト（配列）の代入の応用

const getPrice = (noTax,qty) => {
const includeTax = noTax * 1.08;
const amountPrice = qty * includeTax;
return { qty, noTax, includeTax, amountPrice };

}
console.log(getPrice(1000,5));//{qty:5, noTax:1000, includeTax:1080, amountPrice:5400}

オブジェクトの分割代入

今回お伝えしたかったV8の最大の新機能が、オブジェクトの分割代入 です。とても奥が深いので丁寧に基礎固めしていきましょう。

分割代入の基礎

配列の分割代入は、割と直感的です。

変数への再代入も可能ですのでこのような書き方ができます。

let x, y;
[x, y] = [10, 20];
console.log(x, y); //10,20

しかしオブジェクトでは、このような書き方（再代入による分割代入）ができません。

{x, y} = {x:10, y:20};

なぜなら、左辺の{}はブロックスコープとみなされ、オブジェクトリテラルとして認識されないからです。

ですので、変数を宣言（const/let/var）しなければなりません。

const {x, y} = {x:10, y:20};

私も知りませんでしたが、var宣言を省略した、このような書き方もあります。

var {x, y} = {x:10, y:20};
↓
({x, y} = {x:10, y:20});

同名のプロパティを代入する

オブジェクトの分割代入において、代入しようとする変数名は、右辺のプロパティキーと一致していなければなりません。

左辺の変数名と右辺のプロパティキーが、一致しているプロパティバリューのみが代入されます。

({x, y} = {x:10, y:20});
console.log(x,y); //10 20

({X, Y} = {x:10, y:20}); //JavaScriptは大文字小文字を判別します
console.log(X,Y); //undefined undefined

残余プロパティを格納する

上記の性質を利用して、スプレッド構文を使うことにより、残余プロパティ（取得できなかったプロパティ）を変数に格納することができます。※オブジェクトなので順不同な点もお忘れなく。

({X, x, ...props} = {x:10, y:20, z:30});
console.log(X,x,props); //undefined 10 {y:20, z:30}

※スプレッド構文についてのおさらいは他のブログにお任せします。（リンクを貼ろうと思ったけど、あんまりいい記事が無いですね。書こうかしら。）

キーワード引数

最後に、JavaScriptにはキーワード引数（名前付き引数）を使うことができませんが、上記を応用することで実装できるキーワード引数をご紹介します。

function myFunction(){
const person = {id:’tg001’, name :’辻健蔵’, age:39, favorite:’coffee’};
const {id,name,age,favorite} = person;
callFunction_(person);
}
function callFunction_({id,age,favorite,name}={}){
console.log(`${name}は${age}歳で${favorite}好き。`);
}