JS 配列内の連想配列の値を取得する

はじめに

ES6の復習中に配列内の連想配列がうまく取得できず
苦戦したので己の戒めとして残します。

状況

こんな配列があります。

const items = [
  {id: 1, name: "靴", price: 3000},
  {id: 2, name: "服", price: 1000},
  {id: 3, name: "手袋", price: 100},
  {id: 4, name: "マスク", price: 50},
  {id: 5, name: "帽子", price: 800},
];

この時、keyのnameが「靴」である連想配列を探す
getShoesという関数を作る時は

const getShoes = items.find((item) => {
    return item.name === "靴"
  });
console.log(getShoes);

// 実行結果　{id: 1, name: "靴", price: 3000}

このような関数を定義します。

次に配列と、その中のkeyを指定して、一致する値があるか
どうかを探し、一致する連想配列を表示する
getAnyOne関数を作ります。

const getAnyOne = (array, element) => {
  return array.find((arr) => {
    const key = Object.keys(element)[0]
    return arr.key === element.key
  })
}

こんな感じで書きました。
さっそく帽子の連想配列を取得できるか試すために

console.log(getAnyOne(items, {name: "帽子"}));

と書きました。するとconsoleは

{id: 1, name: "靴", price: 3000}

何故か靴の連想配列を取得しています。どして？

問題の原因

今回getAnyOne関数のreturnする部分でキーを指定する際、
連想配列(arr).keyで指定しています。

しかしキーは今回keyという変数で定義しています。

変数で定義されたキーの値を取得する時は
" . "ではなく" [ ] "を使う必要があるそうです。

よって今回の場合

const getAnyOne = (array, element) => {
  return array.find((arr) => {
    const key = Object.keys(element)[0]

    return arr[key] === element[key]
  })
}
console.log(getAnyOne(items, {name: "帽子"}));

とすれば正しくnameが帽子の連想配列を取得することができます。

おわりに

JS、というか何かしらのアプリを作ろうと思うと
ほぼ必ずといっていいほど配列を使用します。

しかしながらまだまだ配列のデータをうまく取得できないので、今後Reactもそうですがその前に前提のJSの知識をもっと深めないとなと反省しました。
（個人的にReact使ってても止まるのはJSの知識分野であることの方が多い）

ここまで読んでくださりありがとうございました！