【JavaScript】オブジェクトのキーを変数で指定して追加・削除する方法｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ

━目次━

Reactを組んでいて一瞬はまったので備忘です。

JavaScriptオブジェクトにプロパティを追加する方法

これまでオブジェクトに要素を追加する場合、下記のように書いていました。

// オブジェクトを定義
let obj = {
  a: "田中",
  b: "山田",
}

// プロパティの追加
obj.c = "鈴木";

console.log(obj); // Object {a: "田中", b: "山田", c: "鈴木"}

// オブジェクトを定義

let obj = {

a: "田中",

b: "山田",

}

// プロパティの追加

obj.c = "鈴木";

console.log(obj); // Object {a: "田中", b: "山田", c: "鈴木"}

ただこの場合プロパティのキー名を変数から設定したいときに以下のようになります。

// オブジェクトを定義
let obj = {
  a: "田中",
  b: "山田",
}

// プロパティのキーを変数に設定
const key = "c";

// プロパティの追加
obj.key = "鈴木";

console.log(obj); // Object {a: "田中", b: "山田", key: "鈴木"}

// オブジェクトを定義

let obj = {

a: "田中",

b: "山田",

}

// プロパティのキーを変数に設定

const key = "c";

// プロパティの追加

obj.key = "鈴木";

console.log(obj); // Object {a: "田中", b: "山田", key: "鈴木"}

変数が展開されずにそのままキー名になってしまいます。

Objectのkeyを変数から設定する方法

そのような場合は以下のように書けば解決できます。

// オブジェクトを定義
let obj = {
  a: "田中",
  b: "山田",
}

// プロパティのキーを変数に設定
const key = "c";

// プロパティの追加 ※.を消して[]で囲む！
obj[key] = "鈴木";

console.log(obj); // Object {a: "田中", b: "山田", c: "鈴木"}