반복문의 동기적(for), 비동기적(forEach, map) 처리 구분

 

두개 모두 같은 목적으로 작성된 코드이다. 하지만 결과는 다르다.

forEach 또는 map 함수로 비동기코드를 호출해 tempArray라는 빈 배열에 비동기 코드의 결과값을 담려고했다.

결과를 먼저 보자면...

 

forEach

for

forEach 또는 map, 해당 배열과 관련된 매서드를 사용해 비동기 코드를 반복시켰을때 console.log가 먼저 실행되고, for 반복문을 실행시켰을때는 내가 원하는데로 작동이되었다.

forEach와 map은 비동기로 작동된다. 하지만 for문은 동기식이기 때문에 그렇다.
만약 for문 안에서 어떠한 오류가 발생될 경우 순차적으로 코드를 작동시키는 동기식이기 때문에 오류가 감지되는 즉시 스크립트는 다음 코드로 실행되지 않는다. 만약 반복문 다음에 중요한 코드가 있다면 이는 문제가 될 수 있다.

다시말해 for문은 동기방식으로 코드를 실행시키기때문에 비동기코드를 실행하는 함수(fetch, ajax, setTimeout 등..)와 호환이 좋다.