JavaScript | 「再帰の動き」を図解で追う

では「配列の合計を再帰で図解」してみましょう。
例として sumArray([2, 4, 6]) を追っていきます。

コード

function sumArray(arr, i = 0) {
  if (i === arr.length) return 0;   // 終了条件
  return arr[i] + sumArray(arr, i + 1);
}

console.log(sumArray([2, 4, 6])); // 12

function sumArray(arr, i = 0) {
  if (i === arr.length) return 0;   // 終了条件
  return arr[i] + sumArray(arr, i + 1);
}

console.log(sumArray([2, 4, 6])); // 12

実行の流れ（潜っていく）

1. sumArray([2,4,6], 0)
   → 2 + sumArray([2,4,6], 1)
2. sumArray([2,4,6], 1)
   → 4 + sumArray([2,4,6], 2)
3. sumArray([2,4,6], 2)
   → 6 + sumArray([2,4,6], 3)
4. sumArray([2,4,6], 3)
   → i === arr.length に当たり、0 を返す

戻りながら計算する流れ

• sumArray([2,4,6], 3) = 0
• sumArray([2,4,6], 2) = 6 + 0 = 6
• sumArray([2,4,6], 1) = 4 + 6 = 10
• sumArray([2,4,6], 0) = 2 + 10 = 12

図でイメージ

sumArray([2,4,6],0)
  → 2 + sumArray([2,4,6],1)
                ↓
                4 + sumArray([2,4,6],2)
                           ↓
                           6 + sumArray([2,4,6],3)
                                      ↓
                                      0 (終了条件)

戻りながら計算すると：

6 + 0 = 6
4 + 6 = 10
2 + 10 = 12

ポイント

• 潜るときは「まだ合計が出ないから次へ進む」。
• 戻るときに「値を足しながら答えが完成する」。
• factorial のときは「掛け算しながら戻る」、sumArray のときは「足し算しながら戻る」。

👉 ここまでで「再帰の流れ」を 掛け算（階乗） と 足し算（配列合計） の両方で追えました。