JavaScript (ES2015) Object の色々メモ

キーの名前とプロパティの変数名が同じなら省略できる

ES5

var cute = '星宮いちご';
var cool = '霧矢あおい';
var sexy = '紫吹蘭';

var soleil_es5 = {
  cute: cute,
  cool: cool,
  sexy: sexy,
};
console.log( soleil_es5 );
// { cute: '星宮いちご', cool: '霧矢あおい', sexy: '紫吹蘭' }

👇

ES2015

const cute = '星宮いちご';
const cool = '霧矢あおい';
const sexy = '紫吹蘭';
let soleil_es2015 = { cute, cool, sexy };
console.log( soleil_es2015 );
// { cute: '星宮いちご', cool: '霧矢あおい', sexy: '紫吹蘭' }

省略してるのとしてないのが入り交じるとﾁｮｲ混乱しそうだから各初期化で書き方統一したほうが良さそうな気もする。

メソッドの定義の方法

ES5までは method_name: function() { ... } の形でオブジェクトにメソッドを定義していたのが、ES2015からは method_name() { ... } という書き方で定義できる。

ES5

var soleil_es5 = {
  cute: cute,
  cool: cool,
  sexy: sexy,
  toString: function() {
    return 'ES5 Soleil ' + this.cute + ', ' + this.cool + ', ' + this.sexy;
  }
};
console.log( soleil_es5.toString() );
// ES5 Soleil 星宮いちご, 霧矢あおい, 紫吹蘭

👇

ES2015

const soleil_es2015 = {
  cute,
  cool,
  sexy,
  toString() {
    return `ES2015 Soleil ${this.cute}, ${this.cool}, ${this.sexy}`;
  }
};
console.log( soleil_es2015.toString() );
// ES2015 Soleil 星宮いちご, 霧矢あおい, 紫吹蘭

Objectのkeyを変数で指定する

ES5までは動的なkeyを使いたい時は、一度オブジェクトを作成してobj[key] = valueの形にする必要があったが、ES2015からは {[key]: value} の形で定義することができるようになった。

ES5

var key = 'pop';
var value = '夏樹みくる';

var es5Obj = {};
es5Obj[key] = value;
console.log('ES5', es5Obj);
// ES5 { pop: '夏樹みくる' }

👇

ES2015

const key = 'pop';
const value = '夏樹みくる';

const es2015Obj = {
  [key]: value,
};
console.log('ES2015', es2015Obj);
// ES2015 { pop: '夏樹みくる' }

キーを定義している [] 内で計算することもできる
e. g.

let i = 0;
const myObj = {
  [`index-${++i}`]: i * i,
  [`index-${++i}`]: i * i,
  [`index-${++i}`]: i * i,
};
console.log( myObj);
// { 'index-1': 1, 'index-2': 4, 'index-3': 9 }

ポエム

お仕事で関わってるプロジェクトで初めてのTypeScriptに触れてて

const hash = {[key: string]: number} = {foo: 1};

既存のコードでこんなのが出てきて、こはいかに？となり調べたらES2015で使えるObjectのkeyを変数で指定する方法で型指定してるとあり、keyを変数で指定するこの書き方を知らなかったので改めてES2015的なObjectを調べました。結果良い機会になりました。

しかし今関わっているプロジェクトがフロントだけでもReact + Redux + TypeScriptで通ってきてない技術が複合的にあるので一度に理解しようとしたり、ステップを抜かして学習しようとしたら挫折するパターンなんで着実に理解していきたいという思いがある一方、仕事できてねーって焦りがあるので学びが合って楽しいのですが心が折れないように気をつけないとという感じの日々です。

何かを変えたいと思ったらやはり関わる人を変えるか、環境を変えるかですね。
モダンフロントエンドマンになるぞー！と、春らしい意気込みするのであった。

[参考]