【js】ES6 オブジェクトリテラル

オブジェクトリテラル

ES6ではオブジェクトリテラルの構文もシンプルに表現できるようになりました。

const title = 'この素晴らしい世界に祝福を';
const mainCharacter = 'カズマ';

const Anime = {
  title: title,
  mainCharacter: mainCharacter,
  subTitle1: 'この自称女神と異世界転生を！',
  subTitle2: 'この中二病に爆焔を！',
  subTitle3: 'この右手にお宝(ぱんつ)を！',
  callInformation: function() {
    return console.log(`このアニメのタイトルは「${this.title}」です。主人公の名前は「${this.mainCharacter}」です。`);
  }
};

Anime.callInformation();
// このアニメのタイトルは「この素晴らしい世界に祝福を」です。主人公の名前は「カズマ」です。

console.log(Anime.subTitle1);
// この自称女神と異世界転生を！
console.log(Anime.subTitle2);
// この中二病に爆焔を！
console.log(Anime.subTitle3);
// この右手にお宝(ぱんつ)を！

これが以前の書き方ですが、

• メソッド（関数型のプロパティ）としての定義をシンプルにできる
• 変数を同名のプロパティに割り当てられる
• プロパティを動的に生成できる

ことができるようになりました。

メソッド（関数型のプロパティ）としての定義をシンプルにできる

メソッド（関数型のプロパティ）としての定義をする場合には、: functionを省略できます。

const Anime = {
  callInformation() {
    return console.log(`このアニメのタイトルは「${this.title}」です。主人公の名前は「${this.mainCharacter}」です。`);
  }

変数を同名のプロパティに割り当てられる

プロパティ名: 変数名と記述していましたが、

プロパティ名と変数名が同名の場合は省略して以下のように書けます。

const Anime = {
  title,
  mainCharacter,

プロパティを動的に生成できる

プロパティ名をブラケット（[]のこと）でくくり動的にプロパティ名を生成できます。

これをComputed property namesと呼ぶそうです。

let i = 0;

const Anime = {
  [`subTitle${++i}`]: 'この自称女神と異世界転生を！',
  [`subTitle${++i}`]: 'この中二病に爆焔を！',
  [`subTitle${++i}`]: 'この右手にお宝(ぱんつ)を！',

変数iに順に加算することでsubTitle1, subTitle2, subTitle3 ...のようなプロパティ名を生成できます。

まとめ

ES6からオブジェクトリテラルが以下のようによりシンプルに書けるようになった。

• メソッド（関数型のプロパティ）としての定義をシンプルにできる
• 変数を同名のプロパティに割り当てられる
• プロパティを動的に生成できる

const title = 'この素晴らしい世界に祝福を';
const mainCharacter = 'カズマ';
let i = 0;

const Anime = {
  title,
  mainCharacter,
  [`subTitle${++i}`]: 'この自称女神と異世界転生を！',
  [`subTitle${++i}`]: 'この中二病に爆焔を！',
  [`subTitle${++i}`]: 'この右手にお宝(ぱんつ)を！',
  callInformation() {
    return console.log(`このアニメのタイトルは「${this.title}」です。主人公の名前は「${this.mainCharacter}」です。`);
  }
};

Anime.callInformation();
// このアニメのタイトルは「この素晴らしい世界に祝福を」です。主人公の名前は「カズマ」です。

console.log(Anime.subTitle1);
// この自称女神と異世界転生を！
console.log(Anime.subTitle2);
// この中二病に爆焔を！
console.log(Anime.subTitle3);
// この右手にお宝(ぱんつ)を！