配列を更新するならforEachじゃなくてfindIndexな理由

ある配列があります。

type THoge = {
　　id: string;
　　items: { id: string; state: '1' | '2'}[]
}

type THogeList = THoge[];

THogeList から THoge の items の state を更新することとします。

forEachを使用する場合

forEachは、配列の各要素に対して指定された関数を実行するために使用されます。しかし、forEachは配列全体をループするだけで、具体的なインデックスや条件に一致する要素を見つけるためには適していません。また、forEachは新しい配列を生成しないため、元の配列を直接変更する必要があります。

findIndexを使用する場合

findIndexは、条件に一致する最初の要素のインデックスを返すために使用されます。これにより、条件に一致する要素を特定し、その要素だけを効率的に更新することができます。特定の条件に一致する最初の要素を見つける場合は、findIndexが適しています。

Result

const updateHogeList = (hogeList: THogeList, id: string, state: TState): THogeList => {
  return hogeList.map(info => {
    const targetIndex = info.items.findIndex(item => item.id === id);

    // 対象のidが見つかった場合のみ更新する
    if (targetIndex !== -1) {
      info.items[targetIndex].state = state ?? info.items[targetIndex].state;
    }

    return {
      ...info,
      items: [...info.items], // 新しい配列を返すためにitemsをスプレッド
    };
  });
};