JavaScriptのeval関数の挙動について

以下のJavaScriptですが

var a = {hoge:'aa', b:'bb'};
var prop = 'hoge';
eval('console.log(a.'+prop+')');

結果はaaです。

しかし

console.log(a.'+prop+');

はエラーになります。

eval('console.log(a.'+prop+')');の中のeval関数の引数内のJavaScriptをそのまま書いただけなのにエラーになるのは意味がわかりませんでしたが、これはどうしてでしょうか。

また、evalを用いずに純粋なconsole.logと変数propを用いて変数aのプロパティhogeの値を表示するにはどうしたらいいでしょうか（console.log(a[prop]);と書けば正常に表示できますが、evalで行ったように+演算子を用いて表現することはできないのでしょうか）

（補足）eval('console.log(a.'+prop+')');の中のpropの直前と直後の2つの+演算子の使い方が理解ができず（特に直後のプラスはわかりません）、調べても算術計算や文字列の連結でしか使っていないようなのですが、今回の+演算子はどのような構文・文法なのでしょうか。
上記のeval関数ではシングルクウォート内に使っていますし、シングルクウォート内はJavaScriptとして解釈されるとしても+演算子の直前にピリオドがあるとピリオドの直後はプロパティを指定するのではないかとか、propの後の+演算子の後には何もないですし、文法的にどうなっているのでしょうか。

また、evalの処理過程で文字列が全てJavaScriptとして解釈されるのなら、そのJavaScriptをevalを使わずに書いても正常に実行されるのでは？と思ったのですがどうしてevalを外して、文字列にしているシングルクウォートも外してもうまくいかないのでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

eval関数は、文字列をコードとして解釈して実行します。

JavaScriptでeval関数の使い方とリスク【初心者向け】 | TechAcademyマガジン

'console.log(a.'+prop+')' は、console.log(a.hoge) という文字列になるので、console.log(a.hoge)というコードとして実行されます。

a.'+prop+' はaオブジェクトのあとに文字列が付いているだけですの、コードとして構文エラーになります。

プロパティへのアクセスは a.hoge という方法以外に、a['hoge'] という記述法があります。
こちらだとプロパティを文字列で指定できます。当然、文字列変数を渡してもOKです。

ということで、下記のコードで正常に実行されます。

js
1var a = {hoge:'aa', b:'bb'};
2var prop = 'hoge';
3console.log(a[prop]);

コメントへの解説

eval('console.log(a.'+prop+')');について、まず「(a.'+prop+')→(a.+prop+)」と置きかわり、「console.log(a.+prop+)」として実行される、というわけではないですよね？

というわけではないです！

'console.log(a.'+prop+')' の prop の中身は'hoge'ですので、
'console.log(a.' + 'hoge' + ')' ということです。
+演算子は文字列の場合、連結ですので、各文字列が連結されて、
'console.log(a.hoge)'という文字列になります。

この文字列を、EVal関数でスクリプトとして解釈して実行してます。

投稿2019/09/20 21:54

編集2019/09/21 03:11

hatena19

総合スコア34073

theplace

2019/09/21 02:46

ありがとうございます。 eval('console.log(a.'+prop+')');について、まず「(a.'+prop+')→(a.+prop+)」と置きかわり、「console.log(a.+prop+)」として実行される、というわけではないですよね？文字列部分がJavaScriptとして解釈されるのなら、そのJavaScriptをevalを使わずにそのまま書いても正常に実行されるのでは？と思ったのですが、どうしてevalを外して、文字列にしているシングルクウォートも外してもうまくいかないのかわかりません。。