React reduceの動作について

Question

現在Reactのアプリ作成の中でreduceの動作について質問させてください.

下記にて全くわからない動作する場所があるので解説して欲しいです.

① test_funcを呼ぶ
② middleObjectを定義して, reduceが走る
③ splitして文字を切り出す
④ !acc[Name1]がtrueとなり中が実行
⑤ if-elseでelseが実行される.
⑥ 0:[{id: "A/testA/AA/sample1.jpg", name: "A/testA/AA/sample1.jpg"}]がコンソールに出力
⑦ middleObject[Name2]に代入される
⑧ AA: children: Array(2) 0: {id: "A/testA/AA/sample1.jpg", name: "A/testA/AA/sample1.jpg"} 1: {id: "A/testA/AA/sample2.jpg", name: "A/testA/AA/sample2.jpg"} length: 2 __proto__: Array(0) id: "testA-AA" name: "AA"がコンソールに出力される. (ここがわからない.)
⑨ 0とコンソールに出力される.

この⑧の場所がわからないのがまだインデックス0番しか処理指定なのになぜかインデックス1の値の処理がされている点です.
正直かなり時間悩んでいるので知恵を貸してもらいたいです.
どうかどうかよろしくお願いします.

import React from "react";
import logo from "./logo.svg";
import "./App.css";

const test_func = (fileName: string[]) => {
  var middleObject: { [key: string]: any } = {};
  const tmp = fileName.reduce<{ [key: string]: any }>((accP, current, idx) => {
    var acc = accP;
    const split = current.split("/");
    const Name1 = split[1];
    const Name2 = split[2];
    const newChild = {
      id: current,
      name: current,
    };

    if (!acc[Name1]) {
      middleObject = {};
    }

    if (middleObject[Name2]) {
      middleObject[Name2]["children"].push(newChild);
    } else {
      console.log([newChild]);
      middleObject[Name2] = {
        id: Name1 + "-" + Name2,
        name: Name2,
        children: [newChild],
      };
      console.log(middleObject);
      console.log(idx);
    }

    if (!acc[Name1]) {
      acc[Name1] = {
        id: Name1,
        name: Name1,
        children: Object.values(middleObject),
      };
    }

    return acc;
  }, {});

  return tmp;
};

function App() {
  const fileName1 = ["A/testA/AA/sample1.jpg", "A/testA/AA/sample2.jpg"];
  const renderTreeObject = test_func(fileName1);
  return <div className="App"></div>;
}

export default App;

Answer 1

React関係なく動かす事はできました。

https://jsbin.com/tetoteqife/edit?html,js,console

かなり読みづらいコードの書き方がされているように思います。

まだインデックス0番しか処理指定なのになぜかインデックス1の値の処理がされている点です.

idx = 1 のときはconsole.logの方の分岐に入っていないだけで、idx=1のときの処理は行われていないように見えました。
いろんなところに、console.logを入れて確認するとよいでしょう。

また、余計なお世話だとは思うのですが読みにくいのはこういう所も関係していると思います。

[JavaScript] reduceは可読性が悪くループで置き換え可能なので使うべきではない - Qiita
https://qiita.com/standard-software/items/3254c19ed5229f3aba9a