【JavaScript】ドット記法ではプロパティ名に変数を使えない #JavaScript

はじめに

Reactで引っかかった箇所を深掘りしたら、JavaScriptの基礎知識のなさであることに気がつきました。調べて試したことをまとめます。

結論

お急ぎの方のために結論から書きます。
タイトル通り、ドット記法ではプロパティ名に変数を指定するとundefinedになります。
ブラケット記法にすれば正しくプロパティの値を参照できます。

const person = {
  firstname:'Taro',
  lastname:'Yamada'
};

const hoge = "firstname";
console.log(person.hoge); // undefined
console.log(person[hoge]); // "Taro"

問題

ここからは、今回直面した問題について書いておきます。Reactのコードになります。

Reactチュートリアルのチャレンジ問題をやっていました。
propsとして受け取った変数nameを使い、ドット記法でオブジェクトのプロパティにアクセスしようとして、undefinedになってしまいました。

App.js

const drinks = {
    tea:{
      plant:'leaf', 
      caffeine:'15–70 mg/cup',
      age:'4,000+ years'
    },
    // 省略
}

function Drink({ name }) {
  const info = drinks.name;
  console.log(info); // [[undefined]]
  return (
      // 省略
  );
}

export default function DrinkList() {
  return (
    <div>
      <Drink name="tea" />
      <Drink name="coffee" />
    </div>
  );
}

解決方法

ブラケット記法だと正しく受け取れることがわかりました。

const info = drinks[name];

参考資料

JavaScript Primer