javascriptのreduceの戻り値を関数にしたときの処理の流れがわかりません。

Question

javascriptで関数の配列をreduceで回し、reduceの戻り値を関数にして、
その関数の中で処理をしてから戻すといった関数を作ったのですが、処理の流れが思ったと通りではありませんでした。

コードは以下です。

const a = () => 'a'
const b = () => 'b'
const c = () => 'c'
const d = () => 'd'

const array = [ a, b, c, d ]

function func(args) {
  return args.reduce((accum, current, index) => {
    console.log('=====outer===== index: ' + index + ', accum: ' + accum() + ', current: ' + current())
    return (str='*') => {
      console.log('---inner--- index: ' + index + ', accum: ' + accum() + ', current: ' + current())
      return str + accum() + ':' + current()
    }
  })
}

console.log(func(array)('結果: '))

結果は以下です。

=====outer===== index: 1, accum: a, current: b
---inner--- index: 1, accum: a, current: b
=====outer===== index: 2, accum: *a:b, current: c
---inner--- index: 1, accum: a, current: b
---inner--- index: 2, accum: *a:b, current: c
---inner--- index: 1, accum: a, current: b
=====outer===== index: 3, accum: **a:b:c, current: d
---inner--- index: 1, accum: a, current: b
---inner--- index: 2, accum: *a:b, current: c
---inner--- index: 1, accum: a, current: b
---inner--- index: 3, accum: **a:b:c, current: d
---inner--- index: 1, accum: a, current: b
---inner--- index: 2, accum: *a:b, current: c
---inner--- index: 1, accum: a, current: b
結果: **a:b:c:d

この結果で理解できないのは、
全体的にどのような処理の流れなのかがわかっていないのですが、
特にreduceの戻り値である関数(inner)の処理が何回もされているのと、
func関数の戻り値の関数を呼び出す際に指定した、引数('結果: ')が最後で適用され、それまではundefinedだということです。
こういったコードを説明している日本語のサイトなどがありましたらそちらを載せていただくだけでもありがたいです。

reduxのcomposeの定義を見ている際に理解できないコードがあったので、似ているコードを作って理解しようと思ったらはまってしまいました。

よろしくお願いします。

Answer 1

関数とreduceで実行されることをばらすと、下記のような動作になっています。

const a = () => 'a'
const b = () => 'b'
const c = () => 'c'
const d = () => 'd'

// 初期値指定がないため最初のaccumは最初の要素になり、indexは1から始まる。
const accum1 = a;
const current1 = b;
const index1 = 1;
console.log('=====outer===== index: ' + index1 + ', accum: ' + accum1() + ', current: ' + current1());
const accum2 = (str='*') => {
  console.log('---inner--- index: ' + index1 + ', accum: ' + accum1() + ', current: ' + current1());
  return str + accum1() + ':' + current1();
};
const current2 = c;
const index2 = 2;
console.log('=====outer===== index: ' + index2 + ', accum: ' + accum2() + ', current: ' + current2());
const accum3 = (str='*') => {
  console.log('---inner--- index: ' + index2 + ', accum: ' + accum2() + ', current: ' + current2());
  return str + accum2() + ':' + current2();
};
const current3 = d;
const index3 = 3;
console.log('=====outer===== index: ' + index3 + ', accum: ' + accum3() + ', current: ' + current3());
const accum4 = (str='*') => {
  console.log('---inner--- index: ' + index3 + ', accum: ' + accum3() + ', current: ' + current3());
  return str + accum3() + ':' + current3();
};
console.log(accum4('結果: '));

最初のaccumが単なるaにのはいいとして、問題は次のaccumですが、returnで渡した関数そのものになります。そして、次の処理のouterの所でそのaccumが呼ばれるため、returnで渡した関数の中身が実行されます。上のコードで言うと、accum2がouterで実行されているという所ですね。そのような流れで、どんどんaccumには過去の関数も蓄積され、その度にouterでもよばれているので、何度もinnerが表示されると言うことです。

Comments

[u310ai]

処理の流れが大変わかりやすく、またどう考えればいいのか勉強になりました！
有難うございました！

Answer 2

javascriptで関数の配列をreduceで回し、reduceの戻り値を関数にして、

その関数の中で処理をしてから戻すといった関数を作ったのですが、
(中略)

reduxのcomposeの定義を見ている際に理解できないコードがあったので、似ているコードを作って理解しようと思ったらはまってしまいました。

reduxのcompose関数を使ったことがないのですが、冒頭の一文や、composeという言葉から推測するに、やりたいことは質問文に掲載されているようなAではなく、Bではないでしょうか？

// A: 質問文のコードからreducerを取り除いて簡略したもの
const func = f => g => v => v + f() + g();

ではなく、

// B:
const compose2 = f => g => v => f(g(v));
//とか
const compose3 = f => g => h => v => h(f(g(v)));

その上で、Arrayのreduceメソッドを使って、複数の関数をcomposeできる便利なユーティリティー関数を作りたいみたいな話が根本的なところにあるのかなと思いました。

これを前提に簡単なデモコードを書いてみました。

// compose関数に渡す関数(curry化は省略)
const trim = str => str.trim();
const splitBy = splitter => words => words.split(splitter);
const joinWith = jointer => arr => arr.join(jointer);
const toLowerCase = str => str.toLowerCase();

const Identity = value => value;

const compose = (...funcs) => {
	return funcs.reduceRight((chainedFunc, currentFunc) => {
			return (...args) => currentFunc(chainedFunc(...args))
		}, Identity)
}

// 左右の空白除去してハイフン区切りのスラグを作成する関数をcompose
const slugify = compose(toLowerCase, joinWith('-'), splitBy(' '), trim)
console.log(slugify('  My First Blog Entry  ')); // "my-first-blog-entry"

※ 一般的にcomposeというと、引数に渡された関数を右端の関数から順に適用していく場合が多いと思うので、reduceRightを使いました。

Comments

[u310ai]

確かに僕が見たサイトのcomposeの説明でもreduceRightを使っていたのですが、
元のコードを見るとreduceを使っておりましたので、これはどういうことかと思い調べていて今回の質問に至りました。
以下が元のコードの該当の部分です。

`return funcs.reduce((a, b) => (...args) => a(b(...args)))`

調べる中でもっとわかりやすくしようと思い、
質問文のようなコードに変えてテストしていました。
これから上記のコードを紐解いていくにあたって、回答していただいたコードは助けになりそうです。
有難うございました！

[HayatoKamono]

どういたしまして！頑張ってください！