「配列を n 個ずつのかたまりに切り分ける」イメージ
for (let i = 0; i < arr.length; i += n) chunks.push(arr.slice(i, i + n)) これは、配列を n 個ずつの「小さな配列（チャンク）」に分割するための定番パターンです。
天才プログラマー視点で言うと、 「一気に全部じゃなくて、決まったサイズごとに処理したい」ときの基本テクニックが、この chunk 処理です。
全体の流れをざっくり言うと
やっていることは、たったこれだけです。
配列の先頭から n 個切り出して chunks に入れる。 次はその次の n 個を切り出して chunks に入れる。 それを、配列の終わりまで繰り返す。
この「切り出し」に使っているのが slice(i, i + n)、 その「繰り返し」を作っているのが for (let i = 0; i < arr.length; i += n) です。
例題で chunk の動きを確認する
例えば、こういう配列があるとします。
const arr = [1, 2, 3, 4, 5, 6, 7];
const n = 3;
const chunks = [];
for (let i = 0; i < arr.length; i += n) {
chunks.push(arr.slice(i, i + n));
}
console.log(chunks);
// [[1, 2, 3], [4, 5, 6], [7]]
ここで何が起きているかを、少しゆっくり追ってみます。
最初のループでは i = 0。 arr.slice(0, 3) で [1, 2, 3] を切り出し、chunks に入れます。
次のループでは i = 3。 arr.slice(3, 6) で [4, 5, 6] を切り出し、chunks に入れます。
次のループでは i = 6。 arr.slice(6, 9) で [7] を切り出し、chunks に入れます。 i が 9 になったら arr.length を超えるので終了です。
結果として、 元の配列が「3個ずつのかたまり」に分割された形になります。
ループ部分を深掘りする — i += n の意味
この書き方のキモは、i += n です。
普通の for 文は i++ で「1ずつ進む」ことが多いですが、 ここでは「n ずつ進む」ことで、「次のチャンクの先頭位置」にジャンプしているわけです。
i が「今のチャンクの先頭インデックス」。 i + n が「今のチャンクの終わりインデックス」。
このペアを slice(i, i + n) に渡すことで、 「今のチャンク」を切り出せるようになっています。
slice 部分を深掘りする — slice(i, i + n) の役割
slice(start, end) は、 「start から end の手前まで」を切り出すメソッドです。
つまり slice(i, i + n) は、 「インデックス i から、インデックス i + n の手前まで」 を切り出します。
n が 3 なら、 slice(0, 3) → 0,1,2 番目 slice(3, 6) → 3,4,5 番目 slice(6, 9) → 6 番目だけ（7 はないので）
というふうに、きれいに「n 個ずつのかたまり」が取れるわけです。
よくある実務イメージ：ページングやバッチ処理
この chunk パターンは、実務でかなりよく出てきます。
大量のデータを一気に処理すると重いので、 「100件ずつ API に投げる」「50件ずつ DB に保存する」 といった「バッチ処理」をしたくなる場面があります。
そのときに、 配列を n 件ずつに分割して、 chunks の各要素を順番に処理していく、 という形で使われます。
まとめ：chunk パターンは「配列を扱いやすいサイズに切り分けるための基本テク」
for (let i = 0; i < arr.length; i += n) chunks.push(arr.slice(i, i + n))
この一行（＋ブロック）は、 配列を「n 個ずつのかたまり」に分割するための、非常にシンプルで強力なパターンです。
先頭から n 個ずつ切り出す。 インデックスを n ずつ進める。 slice でチャンクを作り、chunks に貯める。
この流れを体で覚えてしまうと、 「大量の配列を、ちょうどいいサイズに分けて処理する」という発想が自然にできるようになります。