search
LoginSignup
11

More than 5 years have passed since last update.

posted at

updated at

Organization

ES6オブジェクトリテラルの拡張

プロパティ省略記法

オブジェクトのプロパティのキー名と値の変数名が等しい場合、ES6では省略記法が使える。

省略記法
// ES5
var foo = 0, bar = 1;

var obj = {foo: foo, bar: bar};
console.log(obj.foo, obj.bar);
// 0, 1

// ES6
var obj = {foo, bar};

コンピューテッドプロパティ

従来はプロパティのキー名が入った文字列であるとき、一度オブジェクトを生成する必要があったが、ES6ではキーを[]で囲むことで直接変数や式を指定できるようになった。

コンピューテッドプロパティ
var key = "foo";

// ES5
var obj = {};
obj[key] = 0;
obj[key + "_bar"] = 1;
console.log(obj.foo, obj.foo_bar);
// 0, 1

// ES6
var obj = {
 [key]: 0,
 [key + "_bar"]: 1,
}

メソッド定義

オブジェクトのメソッドをfunctionキーワードを使わずに短く定義できるメソッド定義(method definition)

メソッド定義
// ES5
var counter = {
  count: 0,
  increment: function() {
    this.count++;
  }
};
counter.increment();

// ES6
var counter = {
  count: 0,
  increment() {
    this.count++;
  }
};

ここでアロー関数を使ってしまうと、thisの補足によってincrementメソッド内のthiscounterオブジェクトではなくなってしまう。
このようなケースではthisを束縛しないメソッド定義記法を使う。

参考

WEB+DB PRESS vol.87 ECMAScript6特集

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
11