reduceの使い方について

Question

JavaScriptの練習問題で、「与えられた文の中で、一番長い文字を探す」というものを行っています。

その際、下記のコードで動くと見つけました。

function longest(str) {
  let arr = str.split(' ');

  return arr.reduce((a,b) => a.length < b.length ? b : a, "");
}

console.log(longest('Web Development Tutorial'));

上記の、

return arr.reduce((a,b) => a.length < b.length ? b : a, "");

の部分が上手く理解できずにいます。どなたか、解説をお願いできないでしょうか。

また、reduceとmapの違いについて、
mapは、arrayのvalueひとつひとつに対して処理を行いたい時に適していて、
reduceは、array全体に対する処理をしたい時に適している。
というように解釈しているのですが、これは合っているのでしょうか。

どうぞよろしくお願いします。

Comments

[m.ts10806]

下記リファレンスについては確認したうえでの解釈でしょうか？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
「どう動くか」という挙動の解説もあるので有用とは思いますが

Answer 1

Array.prototype.reduceは、「2つの値をとって1つの値を返す」関数を繰り返し実行することで、配列から1つの値を得る関数です。引数として与えている関数は、「2つの引数のうち長い文字列を返す」という動作をします。

• 1回目…初期値（ここでは空文字列）とarr[0]を引数に関数を呼び出して、長い方を返す
• 2回目…1回目の結果とarr[1]を引数に関数を呼び出して、長い方を返す

というように繰り返せば、最終結果は「arrの中で最長のもの」になります。

mapは、arrayのvalueひとつひとつに対して処理を行いたい時に適していて、

reduceは、array全体に対する処理をしたい時に適している。
というように解釈しているのですが、これは合っているのでしょうか。

だいたいそんな感じですが、じつはreduceを使ってmapと同様なことを実行することも（その分コードを書く必要はありますが）可能です。mapは、「配列の各要素を1対1で変換して、全部変換した配列を返す」専用ですが、reduceは関数次第でいろんな事が可能です。

const double = x => x * 2;
const arr = [1, 2, 3];

// どちらも同じ動作
const mapped = arr.map(double);
const reduced = arr.reduce((newArr, currentValue) => {
  newArr.push(double(currentValue));
  return newArr;
}, []);

Comments

[vankick]

ありがとうございます！

もう1つ質問があったのですが、
arr.reduce((a,b) => a.length < b.length ? b : a, "");
は、 a がアキュムレータ (acc)、bが現在値 (cur)、ということで合っていますか？
そのaとbが、1個1個横にずれてarray内をループしている、ということなのでしょうか。

そして、reduce((a,b) => a.length < b.length ? b : a, "");の意味が理解できていなかったのですが、これは

reduce(function(a,b) {
if(a.length < b.length) {
b
} else {
a, "";
}
}
ということですか？（上記に書き直しても、意味が分からない状態です。）
もしよろしければ、ご教授いただけないでしょうか。

[maisumakun]

(a,b) => a.length < b.length ? b : aまでがArrow Functionで、最後の""はreduceに与える初期値です。

[rhodi]

横からですが簡単に解説します。

> は、 a がアキュムレータ (acc)、bが現在値 (cur)、ということで合っていますか？
おおよそそのような形で理解して貰って問題ありません。

> そのaとbが、1個1個横にずれてarray内をループしている、ということなのでしょうか。
ずれている訳ではなく、a は初回を除いて前回の戻り値、b には配列の要素が入りループするといった形となります。
今回の場合は下記のようになります。

1回目 :
a = initialValue
b = arr[0]

2回目以降 :
a = 前回の戻り値（a または b のうち length の値が大きいもの）
b = arr[n]

今回はこの a と b を比較して a または b を戻り値としています。

また、callbackFnを三項演算子とアロー関数を使わず書き直すのであれば下記のような感じかと思います。

// callbackFn
function compare(a, b) {
if(a.length < b.length) {
return b;
} else {
return a;
}
}

// 初期値
const initialValue = '';

arr.reduce(compare, initialValue);

補足ですが、initialValue を指定しない場合、1回目の a は arr[0]、 b は arr[1] となります。

[vankick]

>maisumakunさん
ありがとうございます！reduceについてもっと勉強します！

[vankick]

>rhodiさん
ありがとうございます！実はまだ、元のコードの""である initialValue の部分が100%理解できていません。これからもっと読んでみようと思います。

[yasutomi]

oh...
> 実はまだ、元のコードの""である initialValue の部分が100%理解できていません。

Answer 2

function longest(str) {
  let arr = str.split(' ');
  return arr.reduce((a, b) => {
    console.log(
      a.length + ' < ' + b.length +
      ' true: ' + b + ' / false: ' + a
    );
    // 0 < 3 true: Web / false:
    // 3 < 11 true: Development / false: Web
    // 11 < 8 true: Tutorial / false: Development
    return a.length < b.length ? b : a;
  }, '');
}
console.log(longest('Web Development Tutorial'));