forEach/forof 차이

forEach안에서 변수에 데이터를 할당하면 비동기로 처리되지만, 전체 forEach는 동기처럼 실행됨. 즉 forEach는 async 콜백을 기다려주지 않음

for...of는 await 없이도 동기 흐름을 보장해주기 때문에 데이터가 정확히 계산됨.

to-be

data.AllSpace.forEach(async (loc) => {
            console.log('entryInfo.IsEntryTemp || loc.IsEntryTemp: ', entryInfo.IsEntryTemp || loc.IsEntryTemp)
            entryInfo.IsEntryTemp = await (entryInfo.IsEntryTemp || loc.IsEntryTemp)
            entryInfo.AccessZoneLength = await (entryInfo.AccessZoneLength + (loc.AccessZone?.length || 0))
          })

          console.log('entryInfo: ', entryInfo)

as-is

const entryInfo = { IsEntryTemp: false, AccessZoneLength: 0 }

for (const loc of data.AllSpace) {
  entryInfo.IsEntryTemp = entryInfo.IsEntryTemp || loc.IsEntryTemp
  entryInfo.AccessZoneLength += loc.AccessZone?.length || 0
}

🧠 forEach + async는 비동기를 기다리지 않는다

data.AllSpace.forEach(async (loc) => {
  // 이 안의 await은 loc에만 적용, forEach 흐름과는 별개
});

• forEach는 내부 콜백이 async여도 콜백이 끝날 때까지 기다리지 않고 다음 요소로 바로 넘어감.
• 즉, entryInfo는 아직 바뀌는 중인데, 밖에서는 이미 console.log('entryInfo')가 실행됨.

✅ for...of는 await이 없어도 흐름을 보장한다

for (const loc of data.AllSpace) {
  entryInfo.IsEntryTemp = entryInfo.IsEntryTemp || loc.IsEntryTemp;
}

• for...of는 동기적 순차 실행이기 때문에, 각 루프가 끝날 때까지 다음으로 안 넘어감.
• 이 구조에서는 entryInfo가 루프 끝날 때 완전히 계산되어 있음.

🔥 왜 이게 중요한가?

• 많은 개발자들이 async/await를 함수 안에만 쓰면 전부 비동기 처리가 되는 줄 착각함.
• 하지만 루프를 감싸는 구조 자체가 비동기를 기다릴 수 있어야 진짜 비동기 처리가 됨.
• forEach, map, filter, reduce 같은 Array 메서드는 비동기 제어 불가.
  ㄴ 즉 첫번째 forEac안에선 async/await을 사용해도 비동기 제어가 불가한건가?!??!