Zenn
🦔

【みんなにわかる|JavaScript】オブジェクトのkeyに変数を使う方法

2021/02/13に公開
JavaScript
JavaScript
tech

はじめに

JavaScriptのオブジェクトのkeyに変数を使う方法について、ES5とES6の書き方をご説明いたします。

今回は下記のcarオブジェクトを作っていきましょう。

var car = {
  bodyType: 'sports',
  maxSpeedKm: 280
}

ES5

  1. 一度空のオブジェクトを作成します。
  2. 空のオブジェクトに対しobj[key] = valueの形で空のオブジェクトにkeyとvalueを設定します。
var key = 'bodyType';
var value = 'sports';

var car = {}; // 1. 空のオブジェクトを作成
obj[key] = value; // 2. 先ほど変数に格納したkeyとvalueを設定
console.log(car) // => {bodyType: "sports"}

それでは、最高速度も追加していきましょう。
既にcarオブジェクトは出来ているので、carオブジェクトに対し上述の2の手順を実行します。

var key2 = 'maxSpeedKm';
var value2 = 280;

car[key2] = value2;
console.log(car) // => {bodyType: "sports", maxSpeedKm: 280}

スポーツカーが完成しました！

なぜ空のオブジェクトを作らないといけないの？　変数をそのままkeyにしちゃダメなの？
と思うかもしれませんが、結論から言うとダメです。

変数をそのままkeyにすると展開された値ではなく、keyの名前がそのまま入ってしまいます。
試してみましょう。

var key3 = 'bodyType';
var value3 = 'sports';

var newCar = {
  key3: value3
}
console.log(newCar) // => {key3: "sports"}

valueのsportsは展開されましたが、keyはkey3と言う変数名がそのまま入ってしまいましたね。

少しめんどくさいですが、ES5でkeyに変数を用いる場合は一度空のオブジェクトを作成すると覚えてください

ES6

それではES6のやり方をみていきましょう。
ES6ではkeyの変数[]で囲むことで、ES5ではしてくれなかった展開をしてくれます。

  1. keyを[]で囲む。
  2. 後は通常通りオブジェクトを作成
let key = 'bodyType';
let value = 'sports';

let car = {[key]: value}; // keyを[]で囲む
console.log(car) // => {bodyType: "sports"}

便利ですね。変数を[]で囲むだけで、通常のオブジェクトリテラルと変わらずにオブジェクトが生成できました。

まとめ

  • ES5
    • 一度空のオブジェクトを生成して、obj[key] = valueの形でkeyとvalueを設定していく。
  • ES6
    • 変数のkeyを[]で囲んであとは普通にオブジェクトリテラルでオブジェクトを作成する時と同じ。

Discussion