Javascriptの"return "について

お世話になります。

Javascript初心者になります。

プロゲートでjavascriptのとっかかりを学び終わったので、応用に入ろうと思い、電卓を作ろうと思いました。

あるサイトに載っていた電卓を、自分好みに色々変更していこうと思っていたのですが、
色々つまづいております。


参考にしたサイトの計算器の「=」に

function calc() {
result.value = new Function("return " + result.value)();
}

というコードがあったのですが、
この中の"return "はどういう意味なのでしょうか？

これはreturnが文字列になっていると考えて問題ないのですか？
また、returnの後に半角が入っているのですが、この半角はなんの意味があるのですか？
（半角を取ると動作しません）
調べても、"return "で引っかからなくて。


https://techacademy.jp/magazine/21139


どなたか、お時間ございます時に、ご教授いただけると幸いです。

No.3 ベストアンサー 回答者： Ogre7077 回答日時： 2020/12/19 21:20

計算式を評価して解を求めるためには、

本格的にやるならば字句解析や構文解析などの
やや難しい処理が必要となります。

ご提示のプログラムの場合は、
計算式を JavaScript の命令文として実行することで、
面倒な解析を JavaScript コンパイラに任せてしまい、
評価結果だけを受け取る設計の様です。

JavaScript コンパイラとして Function を使うならば、
通常の関数の記載内容を文字列として渡すものなので、
以下のような流れで "return " が出現したと推測します。

f = function(){ return 1+2*3; }; // 通常の関数
result = f();
↓
f = new Function("return 1+2*3;"); // 関数の中身を文字列に
result = f(); // コンパイルされた後の評価結果を受け取る
↓
formula = "1+2*3"; // 計算式を分離
f = new Function("return " + formula + ";");
result = f();
↓
formula = "1+2*3";
result = new Function("return " + formula + ";")(); // 変数fを省略
↓
formula = "1+2*3";
result = new Function("return " + formula)(); // セミコロンは省略可能

この回答へのお礼

ご回答いただき、ありがとうございます。
また、お礼が大変遅くなってしまい、申し訳ございません。
書いてくださったことを、読み解きながらで、時間がかかってしまいました。

すごくわかりやすかったです。
元となる計算から、どう言う風に生まれていった計算式なのか、流れで見ることができました。


＞計算式を評価して解を求めるためには、
本格的にやるならば字句解析や構文解析などの
やや難しい処理が必要となります。

色々あったサンプルの中で、一番短くていいかなと思ったのですが、やはり、もう少し処理を多くしているサンプルを選ぶべきでしたでしょうか。

勉強頑張っていきます。
ありがとうございました。

お礼日時：2020/12/21 17:23

No.2 回答者： fujillin 回答日時： 2020/12/18 18:06

こんにちは

Functionで調べてください。

文字列の内容に相当する、新しいfunctionが生成されます。
https://developer.mozilla.org/ja/docs/Web/JavaSc …

押されたキーの内容を判別したりせずに、単純にそのまま文字列として記憶していって、計算する時に、そのまま文字列の計算結果を返すように「return 」の文字列を付け加えています。

＞（半角を取ると動作しません）
後ろの文字列と「return」がくっついてしまい、returnとは認識されず、別の変数名（return5 とか）などとして認識されてしまうからです。

この回答へのお礼

ご回答いただき、ありがとうございます。
また、お礼が大変遅くなってしまい、申し訳ございません。
書いてくださったことを、読み解きながらで、時間がかかってしまいました。

functionに関係することだったのですね。
道理で、returnで色々検索かけても出てこなかったわけですね。

>そのまま文字列の計算結果を返すように「return 」の文字列を付け加えています。
文字列の結果を文字列で…。それに「return」を使うと言うのに、なかなか頭が働かないのは、私の知識不足故ですね。

「returnと文字列がくっつくと動作しない」と言うのも初めて知りました。

Javascriptは難しいですね（独学だから？）。
頑張っていきたいと思います。

ありがとうございました。

お礼日時：2020/12/21 17:15

No.1 回答者： yambejp 回答日時： 2020/12/18 17:56

おそらくresult.valueに入っている式を計算結果として入れ直すということでしょう

function calc() {
result.value = new Function("return " + result.value)();
}
const result={value:"1+1"};
calc();
console.log(result);

"1+1"という文字をreturn 1+1とすることで2に変換して
valueに代入しています

この回答へのお礼

ご回答いただき、ありがとうございます。
また、お礼が大変遅くなってしまい、申し訳ございません。
書いてくださったことを、読み解きながらで、時間がかかってしまいました。

分かるようで、頭がついていかないのは、私の知識不足故です。

function calc() {
result.value = new Function("return " + result.value)();
}
の"return "は、原文のfunction edit(elem) の値をreturnしているという解釈で間違ってないのでしょうか？

一つ何かするたび、一つぶつかっている状況です。
難しいですね、javascript。
頑張ります。

お礼日時：2020/12/21 17:15