[JS] forEach 와 async/await 같이 사용하면 안되는 이유

JS에서 forEach와 async/await를 같이 사용을 하니까
리턴된 값이 빈 값으로 나오는 에러가 발생하였습니다. 

 

이유

빈 배열이 나온 이유는 비동기적인 동작을 제대로 처리하기 못하였기 때문에 위와 같은 현상이 발생하였습니다.

JS에서 forEach 메서드는 콜백 함수를 동기적으로 실행하고, 비동기 작업을 기다리지 않고 다음 요소로 넘어갑니다.

그리고 async/await는 비동기적인 처리를 위한 문법이기 때문에 문제가 발생 할 수 있습니다.

 

forEach 메소드 내부에 async/await를 사용하더라도 비동기 작업이 순서대로 처리되지 않고 병렬적으로 실행될 가능성이 높습니다.

 

해결 방안

for ... of 루프 나 for 루프를 사용하여 요소를 순차적으로 처리하는 것이 좋습니다. 

위의 두개의 루프는 await를 기다리면서 비동기 작업을 순차적으로 처리가 가능합니다.

 

 

참고

https://constructionsite.tistory.com/43

[JS] forEach 함수는 async 함수를 기다려주지 않는다

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN