日付毎に日付の要素が何件あるかカウントしたい

Question

実現したいこと

日付毎に日付の要素が何件あるかカウントしたいです
（membersのday要素をカウントしたい）
期待値：
2022-07-23→2
2022-07-24→2
2022-07-25→1
2022-07-23→2

該当のソースコード

const members = [
    { name: "foo", score: 10, day: '2022-07-23' },
    { name: "bar", score: 20, day: '2022-07-23' },
    { name: "bar", score: 20, day: '2022-07-24' },
    { name: "bar", score: 20, day: '2022-07-24' },
    { name: "bar", score: 20, day: '2022-07-25' },
    { name: "bar", score: 20, day: '2022-07-26' },
    { name: "baz", score: 30, day: '2022-07-26' },
]

試したこと

const groupBy = members.reduce((result, current) => {
	  let counts = 0
    const element = result.find(value => value.day === current.day);
  console.log(element)
    if (element) {
        counts++;
    } else {
        counts = 1
    }
    return result;
}, 0); 

console.log(groupBy);

補足情報（FW/ツールのバージョンなど）

同じ日付の時はcountsを++して
それ以外はcounts=1にしてみましたが
エラーになり出力されませんでした。

resultを初めて使ったのですが、やり方があっているのか分かりません
どなたかご教授いただければ幸いです

Answer 1

reduce使うのなら、例えばこうとか：

const members = [
    { name: "foo", score: 10, day: '2022-07-23' },
    { name: "bar", score: 20, day: '2022-07-23' },
    { name: "bar", score: 20, day: '2022-07-24' },
    { name: "bar", score: 20, day: '2022-07-24' },
    { name: "bar", score: 20, day: '2022-07-25' },
    { name: "bar", score: 20, day: '2022-07-26' },
    { name: "baz", score: 30, day: '2022-07-26' },
];


const groupBy = members.reduce((result, { day }) => ({
  ...result, [day]: (result[day] || 0) + 1
}), {});

console.log(groupBy);

{ '2022-07-23': 2, '2022-07-24': 2, '2022-07-25': 1, '2022-07-26': 2 }

補足

lodash 使ってよければ、 groupBy というメソッドがあるのでそれ使ってこう：

const groupBy = _(members).groupBy('day').mapValues('length').value();

👉 https://codepen.io/su507/pen/ExEJrgy?editors=0012

補足2

質問にあるコードの趣旨を活かして修正した案を挙げておきます。

const groupBy = members.reduce((result, current) => {
  if (result[current.day] > 0) {
    result[current.day] ++;
  } else {
    result[current.day] = 1;
  }
  return result;
}, {});

一番重要な修正点は、 reduce の第二引数に与える初期値を 0 から 空オブジェクト {} に修正していることです。

最終的に欲しいのは日付ごとの件数ですから、単一の数字ではないはずです。reduceを使うときの考えどころは以下の2つあります。

(1) 第二引数にどのような初期値を与えるか？（単一の数字 0 でよいのか？ 空の文字列""や空の配列[]がよいのか？空のオブジェクト{}か？ Set か Map か？あるいはこれらの複合か？）

(2) その初期値をaccumulator として望む結果を得るには、第一引数の関数をどう書けばよいか？

(1)の初期値を目的に適うような正しいものを選ぶことができれば、それをもとに(2)でロジックを実装すればよいことになりますが、そもそも(1)を間違うといくら (2)で試行錯誤しても袋小路に入ってしまいます。

また(1) にいくつかの選択肢がありどれも同じように目的を果たせるが、(2) のコードをより完結にあるいは効率のよいものに書ける、よい良い初期値というものも（まま）あり得ます。

なので、(2)を徒労にしないためにはまずは(1)で間違わないというのが大事です。

Comments

[anzi1230]

ありがとうございます！
reduceの例えが私には、難易度高すぎて、ちょっと理解できていません。。

[day]: (result[day] || 0) + 1
これは何をやっている所なのでしょうか？

lodashはとても便利ですね！勉強になりましたありがとうございます！

[退会済みユーザー]

> [day]: (result[day] || 0) + 1
> これは何をやっている所なのでしょうか？

配列members の各要素が、reduce に渡している関数の第二引数に入ってきます。
それを { day } という分割代入によって、各要素のday プロパティだけを取得します。

reduce に渡している関数は、第一引数で渡される result に対してday の値に応じて､以下のいずれかを行う選択肢があります。

(1) result オブジェクト自体の day にあたるカウント数を1増やして、result を返す。
(2) result オブジェクトの内容をコピーし、day にあたる数だけ1増やした新しいオブジェクトを作って、それを返す。

回答のコードでは (2) のほうを実装しています。
なぜ(2)を選んだか？といえば、(2)だとreduce に渡している関数を詰めて書けば、return 文を書かなくて済むように書けるのですが、 (1)では return文を書かなくて済むまでコードを詰めるのが難しいからです。

回答したコードでは、reduce に渡している関数の返すオブジェクトは

{ ...result, [day]: (result[day] || 0) + 1 }

というものですが、...result で現resultの内容を展開して、その後ろの
[day]: (result[day] || 0) + 1
によって、当該日付のカウント数が
- すでにあればそれを1増やした数で上書きし、
- 無ければ 1 を設定します。

(result[day] || 0) + 1

と書かないで単に

result[day] + 1

としてしまうと、result の初期値は空オブジェクトなので、当該日付が何であっても
result[day] は undefined になり、undefined に 1 を足すことになり、
undefined に 1 を足したときに、undefinedを0に暗黙に評価してくれればよいのですが、
そうはならず undefined + 1 は NaN になり、以後、NaN にどんな数を足してもNaNのまま
なので望む結果が得られません。
これを回避するために

(result[day] || 0) + 1

とすることで、result[day] が undefined の場合は、(result[day] || 0) の部分は || の後ろの 0 になり、
0 +1 という足し算が行われて、1 になるという仕組みです。

[退会済みユーザー]

上記コメントの

> (1) result オブジェクト自体の day にあたるカウント数を1増やして、result を返す。

の例として、質問にあるコードの修正したものを回答に追記しました。

[anzi1230]

とてもご丁寧に解説頂き、本当にありがとうございました！
教えていただいた内容は「理解できた気になっています！」
一旦手を動かして再度解説を読み直して理解できるまでやってみたいと思います

(result[day] || 0) + 1←これは他のサイトでもこんな使い方していて、分からなかったので
仕組みが分かり大変すっきりしています（笑）
まずは手を動かしてみます！
本当にありがとうございました