for loop와 forEach 메소드의 차이

일반적인 for 문과 forEach 메소드에 차이가 있다는 점을 새까맣게 모르고, 이제까지 배열을 순회하는 여러 가지 방법 중 하나라고 생각하고 썼다. 그러던 중 주말에 알고리즘 문제를 풀면서 똑같은 코드를 forEach로 실행할 때와 for of로 실행할 때에 다르게 동작한다는 점을 깨닫고 둘의 차이를 찾아보았다.


1. for loop
- 중간에 loop 건너뛰기나 종료가 가능하다 (continue나 break 키워드 사용 가능)
- 반복 범위를 설정할 수 있다 (i++, i--, i+=2 등)
즉, 역순 탐색 등 다양한 방식의 탐색이 가능하다.


2. forEach
- for문과 다르게 중간에 끊을 수 없고, 배열의 모든 요소를 끝까지 순회한다.
forEach의 콜백 함수 안에서 return을 해도 함수가 종료되지 않는다. 즉, break처럼 동작하는 게 아니라 continue처럼 동작한다.

[1,2,3,4].forEach(el => {
    if (el===3) return
    console.log(el)
})

위의 코드를 실행시켰을 때 콘솔에 1, 2까지만 찍히고 끝나야 할 것 같지만 그렇지 않다. 결과는 다음과 같다.

콘솔창에 1, 2, 4가 찍힌다

forEach 메소드의 MDN에 따르면 "예외를 던지지 않고는 forEach() loop를 중단시키거나 탈출할 수 있는 방법은 없다"고 나온다. 여기서 예외란 아마 에러인 것 같다.

콘솔창에 1, 2까지 찍히고 에러 메시지가 뜨며 그 이후 코드는 실행되지 않는다

- 위에서 본 것처럼 return이 우리가 원하는 방식으로 동작하지 않기에 return 값을 받지 못한다. 즉, forEach() 메소드의 콜백 함수 안에서 어떤 값을 return 하는 코드를 작성했다 하더라도 forEach()는 배열 요소의 끝까지 순회하며 최종적으로 undefined만을 반환한다.

'3에서 종료'가 아닌 undefined 반환

true가 아닌 undefined 반환

이 두 가지 사실을 몰라서 forEach 메소드 안에서 return 키워드 때문에 지지고 볶으며 어제 엄청 고생을 했지만, 둘의 차이점을 명확히 알게 된 게 큰 수확이라고 생각한다.

for loop와 forEach의 차이점을 찾아보면서 가장 큰 차이로 많이 언급되는 부분이 for는 동기적으로 동작하고, forEach는 callback 함수 때문에 비동기적으로 동작한다는 내용이 많은데, 이 부분은 알고리즘 문제를 풀면서 걸림돌이 됐던 부분이 아니어서 아직 무슨 얘기인지 잘 모르겠다. 이러한 사실 때문에 for loop는 await 키워드를 쓸 수 있고, forEach에서는 await 키워드를 쓸 수 없는 차이점도 있다고 하는데, 다음에 이거 때문에 고생을 또 한바탕 해야(...) 알 수 있을 것 같다.


📚 참고자료

[JavaScript] 반복문 (for, forEach 등)의 종류와 퍼포먼스 비교

[Javascript] forEach 안에서 return/break 처리?

async/await를 이용한 비동기 loop 병렬로 순차 처리하기