Object.keys()でプロパティを列挙するコードについて

Question

下記のコードについて、不明点がありご質問させていただきます。

'use strict';
{

const person = {
    name: 'mico', 
    age: 25,
};

const keys = Object.keys(person);
keys.forEach(key =>{
    console.log(`Key: ${key} Value:${person[key]}`);
});
}

console.log(`Key: ${key} Value:${person[key]}`);の部分で、
Key: ${key}でプロパティのキーが出力されるのはわかるのですが、Value:${person[key]でプロパティの値が出力されるのかがわからず進めずにいます。

どなたかわかりやすくご教示いただけませんでしょうか。
初歩的な質問で恐縮ですがどうぞよろしくお願いいたします。

Comments

[m.ts10806]

質問は「なぜ」ではなく、「実行した結果出力されるのか否か」ですか？
実行したら分かる話をされているのかどうかを聞いています

[sanayaaan]

すみません、質問の文章が変でした。
「なぜ」Key: ${key}だとプロパティーのキーが表示され、Value:${person[key]だと値の方が表示されるのかがわかりません。
よろしければご教示いただけますと助かります。

[m.ts10806]

回答してます。ひとまず質問調整してください。

Answer 1

node.jsとbrave,firefoxで実行してみました。
問題なさそうに思います。

出力結果

Key: name Value:micoKey: age Value:25```

Comments

[sanayaaan]

すみません、出力自体は実行されるのですが、なぜperson[key]で値が出力されるのかがわからず、、。質問が言葉足らずでした、失礼いたしました。

Answer 2

const keys = Object.keys(person);で取得したpersonのkeyを回してるからです。
リファレンス確認すると分かりますが

Object.keys()

Object.keys() メソッドは、指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。

つまり、person['name']もしくはperson.nameのように直接keyを参照するのと理屈は同じです。
オブジェクトなので、key:value形式。keyにアクセスするとvalueが呼び出されます。

Comments

[sanayaaan]

大変よく理解できました！！
とても助かりました。ありがとうございました。

[m.ts10806]

機能に疑問があるときは提示したようにリファレンス、ドキュメントを参照してください。