現代的JavaScriptおれおれアドベントカレンダー2017 – 07日目

概要

オブジェクト定義時に、プロパティ名に変数を使えるようになりました。

今までこう↓分けて書かなくちゃいけなかったのを、

const id = '12345';

const obj = {};
obj[id] = { name: 'Newcomer!' },

console.log(obj[id]);

こう↓書けます。

const id = '12345';

const obj = {
  [id]: { name: 'Newcomer!' },
};

console.log(obj[id]);

プロパティ名

この動的なプロパティ名、名前を “computed property name” といいます。「計算されるプロパティ名」。

オブジェクト初期化の際に使える「名前」は、以下の四種類ということになります。

  • 識別子名 { foo: xxx }
  • 文字列リテラル { "foo": xxx }
  • 数字 { 123: xxx }
  • computed property name { [Date.now()]: xxx }

鉤括弧 [ ～ ] の中身

は基本的に何でも書けます。

ただし、計算結果を文字列に変換されます。例えば以下はどれも 10になります。

const obj0 = {
  10: {},
};

const obj1 = {
  [11 + 2 - 3]: {},
};

const obj2 = {
  ['1' + '0']: {},
};

// 10を返す関数を即時実行
const obj3 = {
  [function(){ return 5 * 2; }()]: {},
};

// 文字列にすると"10"になるオブジェクト
const objOf10 = { toString: () => 10 };
const obj4 = {
  [objOf10]: {},
};

テンプレート記法

文字列リテラルは使えるけどテンプレート記法は使えません。まあそうだよね。

使いたい場合は、今回のcomputed property nameと組み合わせます。

const obj = {
  [`id-${id}`]: { },
};

その他

計算されるプロパティ名？

なんかもっと良い表現ないものか。

参考