for 반복문에 await를 붙일 수 있다고?

그동안 수많은 for문을 쓰면서 for문을 비동기로 쓸 수 있는 방법이 있을 거라고는 생각도 못했다. 자바스크립트엔 정말 안 되는 게 없구나..

심지어 MDN 공식 설명 페이지도 있다.

영어를 한국어로 번역한 문서여서 약간 어색하지만 한번 옮겨본다.

for await...of

for await...of 구문은 보통 비동기에 대응하는 열거자를 나열할 때 쓰이지만, String, Array, Array 같은 객체 (e.g., arguments or NodeList), TypedArray, Map, Set 같은 동기적으로 열거 가능한 객체 또한 가능하며, 사용자가 직접 정의한 동기 또는 비동기 객체도 나열할 수 있도록 해준다. 일반적인 for ...of 문과 마찬가지로 열거자 심볼이 정의한 속성을 실행하게 되어 열거한 값을 변수로 받아 처리한다.

옮겨놓고 보니 더 어렵다. ㅠㅠ 그래서 오픈 카톡에 위 링크를 공유해주신 분의 답변을 그대로 옮기면 다음과 같다.

반복문 내의 모든 비동기 작업을 기다리게끔 하는 방법 정도로 이해하시면 될 것 같습니다!
Promise.all이랑 비슷하게 여기실 수도 있지만, 순차적으로 하나씩 실행한다는 점이 차이라고 알고 있습니다

크.. 쉽다 👍 즉, for 반복문 내의 모든 작업이 비동기로 처리될 수 있도록 한다고 이해했다. (한 작업이 완료되어야 다음 반복문이 돌도록)

원래 이 코드는 자신이 실험해본 코드를 공유해주신 분의 codesandbox 코드를 보다가 떠오른 질문이었다. 신기한 형태의 코드를 알게 되어서 기쁘다 🥰