JavaScript のショートハンドプロパティ

変数aとbがあり、次のようにオブジェクトobjを定義したとしましょう。

const a = 1;
const b = 2;
const obj = {
  a: a,
  b: b,
};

このオブジェクトobjを出力すれば次のようになります。

console.log(obj); // {a: 1, b: 2}

これは、新しくオブジェクトを作って、a というプロパティに a の値をセット、 b というプロパティに b の値をセットしたという状況です。

違う書き方をすれば、次のような状況です。

const obj = {};
obj.a = a;
obj.b = b;

これは、今ある変数をオブジェクトのプロパティ名に付け替えたとも言えます。

この場合、JavaScript の ES6 ではもっと簡潔に書くことができるようになりました。

JavaScript (ECMAScript 2015, ES6) で導入されたショートハンドプロパティ (shorthand properties、短縮表記プロパティ) と呼ばれる書き方では、上と同様のことが次のように書けます。

const a = 1;
const b = 2;
const obj = { a, b }; // ショートハンド・プロパティ
console.log(obj); // {a: 1, b: 2}

この場合、オブジェクトの変数objにaとbという名前の二つのプロパティができて、 それらの値として、それぞれ変数a、変数bの値がセットされます。

const obj = { a: 1, b: 2 };
const { a, b } = obj; // Destructuring
console.log(`a=${a}, b=${b}`); // a=1, b=2