object.keyにおけるo[key]について

Question

以下のコードについての質問です

'use strict'
{

    const obj = {
        a:1,
        b:2,
    };

    Object.keys(obj).forEach(key => {
        console.log(`${key}:${obj[key]}`);
    })

}

こちらのプログラムの仕組みがわからず調べた結果、以下の質問と回答を見つけました。

https://teratail.com/questions/188767

しかし、完全に疑問が解決できてないので質問をさせていただきます。
こちらの質問において回答でobj[key]のkeyは変数であるため、console.log(${key}:${obj[key]});のように書くという風に書かれておられました。
しかし、この回答におけるobj[key]は一体どこで宣言されたのか。つまりオブジェクトobjがどのタイミング配で列に変更されているのかがわかりません。

そこで質問なのですが、このobj[key]はいつ宣言されるもしくは配列に変更されたのか教えていただきたいです。よろしくお願いいたします。

Answer 1

objは最初に宣言されてからずっとobjectのままです。
obj.a でも obj['a'] でも同じ要素にアクセスできます。

obj.a のようにドットで繋いでアクセスするほうがシンプルだしわかりやすいので多用されますが、中にはドットで繋げられないキーもあるので、そのときはブラケットに囲んでアクセスします。
具体的には obj = {'123': 'abc'} というオブジェクトの値に obj.123 ではアクセスできません。 obj['123'] とする必要があります。

MDM

Comments

[sasasa1231]

すいません。自分の質問文が悪く皆様に誤解を与えてしまったようです。
上記のコードですが、きちんと動作します。しかし${obj[key]｝の部分を${obj.key}とすると結果がundefinedとなってしまいます。リンク先の質問ではその問題に関する回答が乗っており、その解答についての質問でした。このようなわかりづらい質問をしてしまい申し訳ございませんでした。

[thyda.eiqau]

tetsunosukeさんの回答に (間違って) コメントして補足していますのでご確認ください

[sasasa1231]

ありがとうございます。
回答が理解できず焦ってしまいコメントを書いてしまいました。
補足コメントを読んだ結果理解できました。
ありがとうございました。

Answer 2

つまりオブジェクトobjがどのタイミング配で列に変更されているのかがわかりません。

JavaScriptのオブジェクトは、どんなオブジェクトでも添え字記法でアクセスできます。変更はされていません。

IDでオブジェクトを探すdocument.getElementByIdを。document['getElementById']としても同様に使えます。

Comments

[sasasa1231]

すいません。自分の質問文が悪く皆様に誤解を与えてしまったようです。
上記のコードですが、きちんと動作します。しかし${obj[key]｝の部分を${obj.key}とすると結果がundefinedとなってしまいます。リンク先の質問ではその問題に関する回答が乗っており、その解答についての質問でした。このようなわかりづらい質問をしてしまい申し訳ございませんでした。

Answer 3

どのリファレンスを出すか迷いましたが,ECMAScript2018より 12.3.2Property Accessors

Properties are accessed by name, using either the dot notation:

MemberExpression . IdentifierName 
CallExpression . IdentifierName
or the bracket notation:

MemberExpression [ Expression ] 
CallExpression [ Expression ]
The dot notation is explained by the following syntactic conversion:

MemberExpression . IdentifierName
is identical in its behaviour to

MemberExpression [ <identifier-name-string> ]

と書いてあり、

プロパティのアクセスにおいて、obj[key] と obj.key は「同じ」 という意味です。
配列 になっているわけではないです。

Comments

[sasasa1231]

すいません。自分の質問文が悪く皆様に誤解を与えてしまったようです。
上記のコードですが、きちんと動作します。しかし${obj[key]｝の部分を${obj.key}とすると結果がundefinedとなってしまいます。リンク先の質問ではその問題に関する回答が乗っており、その解答についての質問でした。このようなわかりづらい質問をしてしまい申し訳ございませんでした。

[thyda.eiqau]

obj[key]において、keyには 'a' や 'b' などが入りますから、つまりこれは obj['a'] にアクセスしているのと同じです。
いっぽう、obj.key は、obj['key'] にアクセスしているのと同じです。 obj['key'] という値はそもそも定義されていない (undefined) です。

[thyda.eiqau]

おっと、失礼、自分の回答にコメントしたつもりが横槍になってしまいました。

[tetsunosuke]

なるほど

まあ解決したのであればよかったです

[sasasa1231]

わざわざ回答していただいたのに申し訳ございませんでした
今後は気を付けて質問させていただきます

Answer 4

やっていることはこんな感じ

const obj = {
a:1,
b:2,
};
const keys=Object.keys(obj);
/* keys=[a,b] */
for(var i=0;i<keys.length;i++){
  var key=keys[i];
  console.log(key);
  console.log(obj[key]);
};

Comments

[sasasa1231]

コメントありがとうございます。
構造について理解することができました。
皆様の回答のおかげでforEach文に関する理解ができていなかったことに気づいたのでもう一度勉強しなおします。ありがとうございました