javaScript コード、解説をお願いします

Question

前提・実現したいこと

「codewars]というサイトを使ってjavaScriptを学習しているものです。
コードを解説していただきたく存じます。

add(1)(2)(3); // 6
add(1)(2)(3)(4); // 10
add(1)(2)(3)(4)(5); // 15
このように、カッコでくくった数字をチェーンのようにつなげて、その合計を出力する関数addを作成せよ、という課題がありました。
https://www.codewars.com/kata/a-chain-adding-function/javascript

模範解答は

function add(n){
  var fn = function(x) {
    return add(n + x);
  };
  
  fn.valueOf = function() {
    return n;
  };
  
  return fn;
}

とのことでした。
ここで、valueOf をオブジェクトのプロパティとすると、基本型の値と結合する際に、valueOfの中身が返される、と習い、そこがポイントかと思うのですが、理解できませんでした。

どなたか解説をよろしくお願いいたします。

Comments

[m.ts10806]

質問テンプレート部分の文言が多く残っています。質問内容や意図を読み取る上ではノイズにしかなりませんので、自身の質問に関係のある文章のみ残してください。また、プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

[Behemoth]

承知しました！　ご説明いただきありがとうございます。

[Lhankor_Mhy]

この模範解答って、みなさん動作してます？

[namimon]

関数が戻ってきます

[Lhankor_Mhy]

ですよね。数値で受け取るには評価しなきゃいけないから、true || add(1) みたいなおまじないを書かないと……

Answer 1

おー、この回答はちょっと思いつきませんでした。
素敵ですね…覚えておいて今度どっかで使おう。

function add(n){
  var fn = function(x) {
    return add(n + x);
  };

  fn.valueOf = function() {
    return n;
  };

  return fn;
}

console.log(
  Array(100000)
  .fill(0)
  .map((_, i) => i + 1)
  .reduce((sum, it) => sum(it), add)
  .valueOf()
)
// 5000050000

そして使い方はこうですか。
はい、大体理解したので早速解説に移ります。

---

addは関数です。
中身でfnという関数を宣言して、fn.valueOfというプロパティをくっつけてすぐに返します。

2回目以降が素晴らしくて、
2回はfnに代入された引数がxの無名関数が実行されます。
その結果はreturn add(n + x)

足し算した結果が再帰関数のようにaddに転がり込み、
fnを作成、valueOfプロパティをくっつけて帰ってきます。

3回目以降は全て2回目と同様です。
何回呼び出しても今作ったfnが帰ってきます。

でもこいつ関数じゃん、合計結果の数値が欲しいんだけど？
最終的に値を取り出す時の事を想定してvalueOfが用意されているようです。
値を取り出す時はプロパティのvalueOfを使って取り出しましょう。

console.log(add(1)(2)(5));
// function
console.log(add(1)(2)(5).valueOf());
// 8

---

おまけ: valueOfプロパティの効果

命題がadd(1)(2)(3)…と無限にチェーン出来るという事は、関数を返し続ける関数である必要があります。
じゃあ値を取り出したくなってもよくわかんないよね…
今回の模範解答はたまたまvalueOfが宣言されていたのだけど……

JavaScriptにはインスタンス化されたオブジェクト等、
Stringとして表せられないものには大抵valueOfというメソッドが用意されており
何時でも値に変換出来るようにするというルールがあります。

function add(n){
  var fn = function(x) {
    return add(n + x);
  };

  fn.valueOf = function() {
    return n;
  };

  return fn;
}

// console.logしたらf 6が表示されるけどなんだ？
console.log(add(1)(2)(3)) // f 6

// 足し算すると普通にNumber型っぽく計算に使える！？
console.log(10 + add(1)(2)(3)) // 16

// valueOfがあればなんでもいけんの？じゃあこれは？
console.log(10 + {
  name: 'taro',
  age: 17,
  valueOf: function(){ return this.age }
})
// 27

// 配列とかどうすんだ？
var arr = [1, 2, 3];
arr.valueOf = function(){
  var sum = 0
  for (var i = 0; i < this.length; i++) {
    sum += this[i]
  }
  return sum
}
console.log(10 + arr) // 16

こういう効果があります。
この辺も含めると、質問文のコードは模範解答となるのは間違いないでしょう。

ただ、add(1)(2)の結果が3という元ネタサイトの記述は違和感がありますけどね。
まぁconsole.logを使って「f 3」と表示されるのはChromeの機能であり
Node.jsや別のブラウザでconsole.logに放り込めばそのまま3と表示される可能性はあります。
（Node.jsでは{ [Function: fn] valueOf: [Function] }と表示されて全然駄目ですが）

問題の関数を返し続ける関数の時点でかなりイレギュラーな問題でしたね。
でも頭の体操としては楽しい問題だと思いますし、コードに深みが出る良い問題＆模範解答だと思います。

Comments

[Behemoth]

詳しいご回答をまことにありがとうございます！
miyabi-sun様の回答を熟読し、JavaScriptに関する理解を深めたいと思います。
僕の鈍った頭を鍛えないと...

[Behemoth]

一つ質問なのですが(あまりに基本的なことならば、申し訳ありません）、たとえば、add(1)(2)(3)の場合、
1 add(1)
2 add(2)
3 add(3)
のように処理が行われているということでしょうか？
また、
add(1) でfn(つまり、1)が返されと思うのですが、function(x){
return add(n + x)
}
の'x'とはどこから持ってくるのですか？

[miyabi-sun]

これは結構わかりにくい中級者〜上級者が意識する概念だったりするので大丈夫ですよ！
クロージャーの概念に近い、関数生成時のスコープを利用します。

add(1)を行うとまず引数n=1になります。
そしてfnを生成してvalueOfをくっつけ返します。
戻り値のfn関数は引数xを利用して実行する関数のようです。
ここまでは楽勝ですよね。

実はこの時、引数のn=1は宣言されっぱなしでスコープの中で生き続けます。

続いてadd(1)(2)の解説。
上の結果を元にfn(2)を実行します。
fnの関数はreturn add(n + x)ですよね。
えっ、今叩いたのは2だからx=2は分かるんだけど、nって何なの？？？

このnの正体は、最初のadd(1)の引数として宣言されっぱなしで放置されていたn=1君なのです。

結果としてfn(2)の戻り値はadd(n + x)からadd(1 + 2)になります。
つまりadd(3)を更に評価して結果を返さなければなりません。
add(3)の実行結果はn=3で宣言しっぱなしにしたままfn関数を作って返します。

念のためadd(1)(2)(3)にいきましょう。
更にfn(3)を実行すると、束縛され続けているn=3とx=3を使いadd(3 + 3)になります。
add(3 + 3)の評価結果は引数n=6を宣言したままのfn関数です。

4回目以降は全てこの繰り返しになります。

[Behemoth]

ご返事が遅くなりました。
理解できました！丁寧なご解説、ありがとうございます。
また、よろしくお願いいたしますm(__)m