別の関数に対して引数の値を渡すことができない理由を知りたい。

いつもお世話になってます。javascript初学者です。
現在、引数の理解度を深めるために簡易的なプログラムを作成してます。
やりたいことは関数で定義した引数の値を別の関数に渡してブラウザに表示させたいです。

登場人物

Curry関数
Curry2関数

やりたいこと

Curry関数で作成した引数の値をCurry2関数に渡してブラウザに表示させたい。

今、困っていること

Curry関数は挙動通りに動作しているので特に問題なし。
しかし、Curry2関数に値を渡そうとするも何故かNaNと表示される。

発生しているエラーメッセージ

特になし

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>引数／戻り値</title>
7    </head>
8    <body>
9        <script>
10            function Curry(carrot, potatoe, meat, powder) {
11                let cooking = carrot * potatoe * meat * powder;
12                return cooking;
13            }
14            var argument = Curry(1, 2, 3, 4);
15            console.log(argument);
16
17            function Curry2() {
18                return Curry();
19            }
20            document.write(Curry2());
21        </script>
22    </body>
23</html>

試したこと

試しにCurry2関数に引数を設定するも結果は変わらず。
ご教示のほどよろしくお願いします。

javascript
1function Curry2(argument) {
2    return Curry(argument);
3}
4document.write(Curry2());

ozwk

2020/05/17 03:00 編集

（ミス）

miyabi_pudding

2020/05/17 03:55

変数の参照（スコープとも言う）について勉強される必要があるかと。そこらへんは知識としていかがでしょうか？

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

回答3件

ベストアンサー

引数の初期値

理由は yuuyu さんの回答通りですが、引数未指定時の初期値は null ではなく、undefinedが正解になります。

JavaScript
1function Curry(carrot, potatoe, meat, powder) {
2  let cooking = carrot * potatoe * meat * powder;
3  console.log(carrot, potatoe, meat, powder, cooking); // undefined undefined undefined undefined NaN
4  return cooking;
5}
6var argument = Curry(1, 2, 3, 4);
7console.log(argument);
8
9function Curry2() {
10  console.log(arguments[0], arguments[1], arguments[2], arguments[3]); // undefined undefined undefined undefined
11  return Curry();
12}
13document.write(Curry2());

カリー化

関数 Curry2 をカリー化の課題コードとしてみるなら、

関数 Curry2 は関数を返さなければなりません
関数 Curry2 が返す関数は「Curry2 に渡された引数で引数束縛」しなければなりません(部分適用)

Rest Parametersを利用すれば、簡単に実装できるのですが、勉強目的なら「arguments.length + if 文」の合わせ技で4つ条件を設ける実装も有だと思います。

ただし、引数束縛されなかった残余引数が undefined になり、NaN 値が返ってしまう事象は変わりない為、数値を得るには引数4つ全てを指定しなければなりません。
1-4の引数指定で数値を得る実装に改善する場合は、関数 Curry で arguments オブジェクトを利用して、可変引数的な実装にする方法が考えられます。

Re: hiroo_mokumoku さん

投稿2020/05/17 04:04

編集2020/05/17 04:09

think49

総合スコア18189

hiroo_mokumoku

2020/05/18 12:55

NaNの解説が分りやすかったので今回ベストアンサーとさせて頂きます。他の方々もご回答頂きありがとうございました。

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

js
1function Curry2() {
2   return Curry(); //(1)
3}

上記(1)のところで、引数がないからではないでしょうか？
Curry()を実行すると、

js
1function Curry(null, null, null, null) {
2  let cooking = null * null * null * null;
3  return cooking;
4}

となるので、null * null = NaN（数値ではない）となります。

投稿2020/05/17 02:59

yuuyu

総合スコア1139

引数は渡す側とうけとる側の数があっていないといけません。
関数

Curry()で生成するのは引数を使った処理結果であって、あくまで引数は変数であるため、呼び出すたびに変わります。

Curry2()で Curry() を呼び出すためには、同じ数の引数が必要ですので、1,2,3,4を渡すようにCurry()を実行すれば良いだけかと思いますが如何でしょうか。
つまり、はじめのCurry() 実行は結果を得ただけでCurry() 内に情報が保持されたわけではありません。
あとは目的次第で作りもかわるかと思います。

投稿2020/05/17 03:07