[JS・TS] valueからkeyを取得する方法を調べてみた。

嶋村星哉

2022.08.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部delivery部MADグループの嶋村星哉です。 valueからkeyを取得したい場面があり、調べるといろいろな方法があったので、使えそうなのをピックアップしてみました。

findを使って取得する

【JavaScript・TypeScript 共通】

const FRUIT = {
  'Apple': 'りんご',
  'Grape': 'ぶどう',
  'Strawberry': 'いちご'
}

const key = Object.keys(FRUIT).find((key) => FRUIT[key] === 'ぶどう')
console.log(key) // Grape

使用場面

valueからkeyを取得したい時が滅多にない場合

findを使って取得する（複数回使う場合）

先ほど紹介した方法を関数にして、仕様を変更する場合に使いやすいようにしてみました。そして、どの連想配列でも使えるように、オブジェクトを渡せるようにしました。【JavaScript】

const FRUIT = {
  'Apple': 'りんご',
  'Grape': 'ぶどう',
  'Strawberry': 'いちご'
}

const getKeyByValue = (object, value) => {
  return Object.keys(object).find((key) => object[key] === value)
}

const key = getKeyByValue(FRUIT, 'いちご')
console.log(key) // Strawberry

【TypeScript】

const FRUIT = {
  'Apple': 'りんご',
  'Grape': 'ぶどう',
  'Strawberry': 'いちご'
}

const getKeyByValue = (object: Record<String, unknown>, value: unknown) => {
  return Object.keys(object).find((key) => object[key] === value)
}

const key = getKeyByValue(FRUIT, 'りんご')
console.log(key) // Apple

使用場面

valueからkeyを取得したい時が複数回ある
複数の連想配列で使いたい

TS版捕捉

今回の実装ではunknownを使用しました。ご存知の方も多いかと思いますが、unknownの他にanyを使うことができます。anyを使ったとしても今回の実装では同じ挙動になりますが、プロパティやメソッドを使うことがないのでunknownを選択しました。詳しくは以下のサイトに載っているのでご覧ください。 anyとunknownの違い - サバイバルTypeScript

reduceを使って取得する（複数回使う場合）

【JavaScript】

const FRUIT = {
  'Apple': 'りんご',
  'Grape': 'ぶどう',
  'Strawberry': 'いちご'
}

const getKeyByValue = (object, value) => {
  return Object.keys(object).reduce((r, k) => {
    return object[k] == value ? k : r
  }, null);
}

 const key = getKeyByValue(FRUIT, 'ぶどう2')
 console.log(key)　// Grape