JavaScriptのObject.keysメソッドを使ってプロパティ名ではなくプロパティ値を取り出す方法について教えてください

Question

下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

下記のオブジェクト変数languagesから各プロパティ値の、”English”, “Japanese”, “”French” を取り出したい場合、Object.keysメソッド使って取り出せることが分かりました。

const languages = {
  en: 'English',
  ja: 'Japanese',
  fr: 'French',
};

console.log(Object.keys(languages).map(key => languages[key]));
//  Expected output: Array ["English", "Japanese", "French"]

ただmap関数の中の返り値をlanguages[key] として角かっこの中にkeyを与えると、プロパティ名ではなくプロパティ値の方が返ってくるのでしょうか？

もしmdnのドキュメントそのような内容のことが書いていれば、そのページのURLも教えていただければ幸いです。私が確認した限りでは、こちらの公式ドキュメントにはそれらしきことが書いていないような気がします。

以上、よろしくお願い申し上げます。

Answer 1

ただmap関数の中の返り値をlanguages[key] として角かっこの中にkeyを与えると、プロパティ名ではなくプロパティ値の方が返ってくるのでしょうか？

考え方がおかしいです。

Object.keys(languages)で、['en', 'ja', 'fr']というキーだけの配列が返ります。Object.keysの役割はここまでで、それ以降はこの結果の配列をmapに通してキーで値を引いているだけです。

---

本題ではありませんが、単に値だけ得たいのなら、Object.valuesを使うことで一発で片付きます。

Comments

[echizeyayota]

> それ以降はこの結果の配列をmapに通してキーで値を引いているだけです。

ご説明ありがとうございます。
了解しました。今後ともどうぞよろしくお願いします。

Answer 2

maisumakun さんのご回答の通りですが、補足しますと、

ブラウザーの互換性 | Object.keys() - JavaScript | MDN
ブラウザーの互換性 | Object.values() - JavaScript | MDN

対応バージョンナンバーをご覧になるとわかると思いますが、Object.values()が登場した時期がObject.keys()よりかなり遅いのです。
要するに、Object.keys()はあるけど、Object.values()がない、という時期が（5年ほど前に2,3年ぐらい？）ありました。

ですので、echizeyayota さんがご提示されたコードはその時期に書かれたか、または古いブラウザ（IEなど）に対応するために書かれたものだと思います。

Comments

[echizeyayota]

補足の説明ありがとうございます。
Object.values() メソッドは初めて知りました。こちらも活用いたします。
今後ともどうぞよろしくお願いします。