for 와 forEach

동기, 비동기의 차이

*for는 동기방식(blocking)이기 때문에 for문 안에 오류가 나면 에러 위치 이후의 이벤트들은 동작하지 않고 멈춰버린다.*

*forEach 는 ES6 문법으로 callback 함수를 뿌린다. 비동기 방식(Non-blocking)으로 진행되기 때문에 forEach 문 안에 에러가 발생하더라도 멈추지 않고 동작한다. 대신 원하는 순서와는 다르게 프로그램이 동작할 수 있다.*

즉, forEach 는 배열 요소를 순차적으로 돌면서 callback 을 실행할 뿐, callback이 끝날때 까지 기다렸다가 다음 callback을 실행하는 것이 아니다. forEach 자신이 실행하는 코드가 비동기를 하든 안하든 관심없이 넘어간다는 것이다.

그러므로, 만약 순차적으로 처리를 원한다면 forEach 대신 for 문 사용을 권장한다.

(비동기도 상관없다.)

const result = async (list) => {
  for (const data of list) {
    await delay()
      .then(() => console.log(data))
  }
}

const list = [1, 2, 3, 4, 5, 6, 7]
result(list)

그러나, for문은 각 요소(data)에 대해 delay()의 결과를 기다려 준 다음에야 그 다음 요소에 대한 delay()를 실행하기 때문이다. 그런데, 요청에 대한 응답을 받은 다음에야 다음 요청을 보내므로 리스트의 데이터가 많아질수록 더 많은 시간이 걸리게 된다.

성능 차이

*forEach문은 “향상된 for문” 이라 칭하기도 한다. 가변적인 배열이나 리스트 크기를 구할 필요가 없어 복잡한 반복문에 적합하며 가독성이 높지만, 인덱스를 생성하여 접근하는 for문 보다 수행속도가 느리다.*

읽기 전용

*forEach 는 반복문 내에서 배열이나 리스트 값을 변경하거나 추가할 수 없다. 읽기 전용으로 불러오기 때문에 데이터를 수정하는 행위가 불가능하다.*

*for 는 forEach 와 반대로 리스트 값을 변경하거나 추가할 수 있으며, 배열을 역순으로도 탐색할 수 있다.*