tech

テックカテゴリー

【JavaScript】オブジェクトのキーを角カッコ [brackets] で囲う記法について

Category | front

Tag | JavaScript

Author | naohito-T

Post | 2023-02-12 / 34,254views

正式名称はComputed Property Namesと言います

たまに見かけるけどいつも忘れてしまうため備忘録として残します。
以下のコード見かけたことありませんか?

const obj = {
  [a]: 'foo'
}


これなに

Computed Property Namesと言います(日本語訳で計算されたプロパティ)
ES2015から実装されたシンタックスです。一番下にMDNリファレンス残しておきます。

用途

オブジェクトのキー名を変数から参照したい場合があったりする時に使用します。
比較としてES2015以前のと比べてみましょう。

Computed Property Namesが無かった時代(ES5)

sample.js

const name = 'Rose'
const age = 23

const profile = {
  // Received => {name: 23} nameとして展開されてしまう
  name: age
}


以上のように変数から参照できないため暫定対応として以下が主流でした(TSであればコンパイルエラーが出ます)

sample.js

const name = 'Rose'
const age = 23
const profile = {}
profile[name] = age

// profile => {Rose: 23}


Computed Property Namesがある時代(ES6+)

sample.js

const person = 'Rose'
const age = 23
const profile = {
  [person]: age
}

// {Rose: 23} と展開される。

こうなります。

Computedなだけにメソッド呼んだりもできる

面白いのがこんなこともできます。

sample.ts

const person = 'Rose'
const age = 23
const profile = {
  [person.toUpperCase()]: age // 大文字にしたい
}

// profile => {ROSE: 23}


オブジェクトのkeyに変数雨を当てれることで表現方法が広がりそうです。
しかしJSはわりかしなんでもできてしまう言語 & 初見では分かりづらいので適宜使用することをオススメします。

以上です。

参考

MDNリファレンス

Share this article

naohito-T

naohito-T

千葉出身。都内(銀座)での美容師経験があるソフトウェアエンジニア。モデル撮影のために購入したmacを使っていたらPCの仕組みが気になり始め、気づいたらエンジニアに。人生まるごとクリエイティブだと思っている。人の髪をデザインしていた経験をIT業界へ活かせることはないか日々模索中。