Posted at

【JavaScript】オブジェクトリテラルの省略記法


はじめに

ES2015を使用したオブジェクトリテラルの省略記法について説明します。

少しコードをスッキリ書く事ができます。


対象読者

・ES2015をこれから使っていきたい人


注意点

レガシーブラウザに対応させる場合は、トランスパイラ(Babel等)を使用し、ES5記法にトランスパイルをおこなってください。

(参考記事)

https://qiita.com/mizchi/items/3bbb3f466a3b5011b509#%E3%81%84%E3%81%BE%E3%81%99%E3%81%90es2015%E3%82%92%E4%BD%BF%E3%81%86

https://qiita.com/hietahappousai/items/9570da4b9275425489b2


省略記法


valueを省略できる(keyとvalueの変数名が同じ時)

【例】 ES5の書き方


const location = 'カリフォルニア';

const company = {
name: 'google',
location: location,
getLocation: function() {
return this.location;
}
}
console.log(company.getLocation()); //カリフォルニア

【例】 ES2015での書き方


const location = 'カリフォルニア';

const company = {
name: 'google',
location,
getLocation: function() {
return this.location;
}
}

console.log(company.getLocation()); //カリフォルニア


functionを省略できる

【例】 ES5の書き方

const location = 'カリフォルニア';

const company = {
name: 'google',
location,
getLocation: function() {
return this.location;
}
}

console.log(company.getLocation()); //カリフォルニア

【例】 ES2015での書き方

//ES2015

const location = 'カリフォルニア';

const company = {
name: 'google',
location,
getLocation() {
return this.location;
}
}

console.log(company.getLocation()); //カリフォルニア


使用例

なにかをPOSTする時

function postMessage(url, data) {

$.ajax(
{
url,
data,
method: 'POST'
}
);
}

const url = 'https://xxxxxx';
const data = { text: 'xxxxxxxx' };

postMessage(url, data);