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

【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);