オブジェクト初期化子で計算されたプロパティやキーを使用する

最近Vue.jsの学習をしていて hoge[FOO](param); のようなコードを見ることが多々あり、 ?となったので調べた。

オブジェクト初期化子自体の説明はここを参照。

計算されたプロパティやキーとは

計算されたプロパティ

ECMAScript 2015 から、オブジェクト初期化子構文も計算されたプロパティ名をサポートします。括弧 []の中に式を記述でき、それが計算されてプロパティ名として使用されます。

引用元 : オブジェクト初期化子 - JavaScript | MDN

[]に記述した式が計算された結果をプロパティ名にできる!!

サンプル

const ADDRESS = 'ADDRESS';

const user = {
    id : 1,
    [ADDRESS] : 'hoge',
    ['MAIL_' + ADDRESS] : 'foo'
}

alert(`user : ${JSON.stringify(user)}`);

サンプルはこれと同じこと

const user = {
    id : 1,
    ADDRESS : 'hoge',
    MAIL_ADDRESS : 'foo'
}

alert(`user : ${JSON.stringify(user)}`);

実行結果

user : {"id":1,"ADDRESS":"hoge","MAIL_ADDRESS":"foo"}

計算されたキー

先ほどのオブジェクト初期化子のメソッド定義の際にもこの方法を使用することができる。

サンプル

const SHOW = 'SHOW';

const hoge = {
    // メソッド名としてSHOWを使用している
    [SHOW](target) {
        alert(target);
    }
}

// hoge objectのSHOWメソッドを呼び出す。
hoge[SHOW]('JavaScript');

サンプルはこれと同じこと

const SHOW = 'SHOW';

const hoge = {
    // メソッド名としてSHOWを使用している
    SHOW(target) {
        alert(target);
    }
}

// hoge objectのSHOWメソッドを呼び出す。
hoge.SHOW('JavaScript');

実行結果

JavaScript

参考 : メソッド定義 - JavaScript | MDN

参考にさせていただいたサイト

オブジェクト初期化子 - JavaScript | MDN

メソッド定義 - JavaScript | MDN