8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-03-04

プロパティ省略記法

オブジェクトのプロパティのキー名と値の変数名が等しい場合、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特集

8
11
0

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
  3. You can use dark theme
What you can do with signing up
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?